@theseam/ui-common 0.4.11 → 0.4.12-beta.0

package/framework/top-bar/top-bar.module.d.ts

@@ -5,15 +5,17 @@ import * as i3 from "./top-bar-menu-button/top-bar-menu-button.component";
 import * as i4 from "./top-bar-menu.directive";
 import * as i5 from "./top-bar-item.directive";
 import * as i6 from "./top-bar-menu-btn-detail.directive";
-import * as i7 from "@angular/common";
-import * as i8 from "@theseam/ui-common/layout";
-import * as i9 from "@theseam/ui-common/buttons";
-import * as i10 from "@theseam/ui-common/icon";
-import * as i11 from "@theseam/ui-common/menu";
-import * as i12 from "../base-layout/base-layout.module";
-import * as i13 from "@angular/router";
+import * as i7 from "./top-bar-compact-menu-btn-detail.directive";
+import * as i8 from "./top-bar-nav-toggle-btn-detail.directive";
+import * as i9 from "@angular/common";
+import * as i10 from "@theseam/ui-common/layout";
+import * as i11 from "@theseam/ui-common/buttons";
+import * as i12 from "@theseam/ui-common/icon";
+import * as i13 from "@theseam/ui-common/menu";
+import * as i14 from "../base-layout/base-layout.module";
+import * as i15 from "@angular/router";
 export declare class TheSeamTopBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamTopBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTopBarModule, [typeof i1.TheSeamTopBarComponent, typeof i2.TopBarTitleComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective], [typeof i7.CommonModule, typeof i8.TheSeamLayoutModule, typeof i9.TheSeamButtonsModule, typeof i10.TheSeamIconModule, typeof i11.TheSeamMenuModule, typeof i12.TheSeamBaseLayoutModule, typeof i13.RouterModule], [typeof i1.TheSeamTopBarComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i11.TheSeamMenuModule, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamTopBarModule, [typeof i1.TheSeamTopBarComponent, typeof i2.TopBarTitleComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective, typeof i7.TopBarCompactMenuBtnDetailDirective, typeof i8.TopBarNavToggleBtnDetailDirective], [typeof i9.CommonModule, typeof i10.TheSeamLayoutModule, typeof i11.TheSeamButtonsModule, typeof i12.TheSeamIconModule, typeof i13.TheSeamMenuModule, typeof i14.TheSeamBaseLayoutModule, typeof i15.RouterModule], [typeof i1.TheSeamTopBarComponent, typeof i3.TopBarMenuButtonComponent, typeof i4.TopBarMenuDirective, typeof i13.TheSeamMenuModule, typeof i5.TopBarItemDirective, typeof i6.TopBarMenuBtnDetailDirective, typeof i7.TopBarCompactMenuBtnDetailDirective, typeof i8.TopBarNavToggleBtnDetailDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamTopBarModule>;
 }

package/layout/layout.service.d.ts

@@ -5,11 +5,19 @@ import * as i0 from "@angular/core";
 export declare class TheSeamLayoutService {
     private _media;
     /**
-     * Is app a mobile-like size.
+     * Observes if app is a mobile-like size.
+     * Default mobile breakpoint is <= 599px,
+     * use setMobileBreakpoint() to change size.
      */
     isMobile$: Observable<boolean>;
+    private _mobileBreakpoint;
+    mobileBreakpoint$: Observable<MediaQueryAliases>;
     constructor(_media: MediaObserver);
     observe(alias: MediaQueryAliases): Observable<boolean>;
+    /**
+     * Update breakpoint observed by isMobile$
+     */
+    setMobileBreakpoint(alias: MediaQueryAliases): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamLayoutService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<TheSeamLayoutService>;
 }

package/menu/menu-toggle.directive.d.ts

@@ -30,6 +30,7 @@ export declare class MenuToggleDirective implements OnDestroy, AfterContentInit
     set positions(val: ConnectionPositionPair[]);
     get positions(): ConnectionPositionPair[];
     private _positions;
+    readonly menuToggle: EventEmitter<boolean>;
     seamMenuTogglePositionsOffsetY: number;
     /** Event emitted when the associated menu is opened. */
     readonly menuOpened: EventEmitter<void>;
@@ -78,5 +79,5 @@ export declare class MenuToggleDirective implements OnDestroy, AfterContentInit
     /** Handles the cases where the user hovers over the trigger. */
     private _handleHover;
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuToggleDirective, [null, null, null, null, { optional: true; }, { optional: true; self: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuToggleDirective, "[seamMenuToggle]", ["seamMenuToggle"], { "menu": "seamMenuToggle"; "positions": "positions"; "seamMenuTogglePositionsOffsetY": "seamMenuTogglePositionsOffsetY"; }, { "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MenuToggleDirective, "[seamMenuToggle]", ["seamMenuToggle"], { "menu": "seamMenuToggle"; "positions": "positions"; "seamMenuTogglePositionsOffsetY": "seamMenuTogglePositionsOffsetY"; }, { "menuToggle": "menuToggle"; "menuOpened": "menuOpened"; "menuClosed": "menuClosed"; }, never, never, false, never>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@theseam/ui-common",
-  "version": "0.4.11",
+  "version": "0.4.12-beta.0",
   "peerDependencies": {
     "@angular/cdk": "^15.0.0",
     "@angular/common": "^15.0.0",
@@ -18,7 +18,7 @@
   "dependencies": {
     "@fortawesome/angular-fontawesome": "~0.9.0",
     "@marklb/file-type": "~10.6.5",
-    "@marklb/ngx-datatable": "18.0.3",
+    "@marklb/ngx-datatable": "~18.0.5",
     "@marklb/ngx-loading": "^10.0.0",
     "@ng-select/ng-select": "~6.1.0",
     "@ng-bootstrap/ng-bootstrap": "~9.1.1",

package/styles/vendor/ngx-datatable/_ngx-datatable.scss

@@ -142,17 +142,19 @@
   .datatable-header,
   .datatable-body {
     .datatable-row-left {
-      background-color: $datatable-background;
-      background-position: 100% 0;
-      background-repeat: repeat-y;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
+      background-color: $datatable-left-background;
+    }
+
+    .datatable-row-even .datatable-row-left {
+      background-color: $datatable-left-row-even-background;
     }
 
     .datatable-row-right {
-      background-position: 0 0;
-      background-color: $datatable-background;
-      background-repeat: repeat-y;
-      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
+      background-color: $datatable-right-background;
+    }
+
+    .datatable-row-even .datatable-row-right {
+      background-color: $datatable-right-row-even-background;
     }
   }
 
@@ -268,6 +270,9 @@
         color: $datatable-body-cell-color;
         font-size: $datatable-body-cell-font-size;
         font-weight: $datatable-body-cell-font-weight;
+        .datatable-body-cell-label {
+          height: 100%;
+        }
       }
       .datatable-body-group-cell {
         vertical-align: top;
@@ -476,13 +481,51 @@
 // }
 
 .datatable-action-button {
-  color: $datatable-action-button-color;
-  background-color: $datatable-action-button-background;
-  box-shadow: $datatable-action-button-box-shadow;
-  &:hover {
-    color: $datatable-action-button-hover-color;
-    background-color: $datatable-action-button-hover-background;
+  flex: 0 0 auto;
+
+  @if $datatable-action-button-outline {
+    @include button-outline-variant(
+      $color: $datatable-action-button-outline-color,
+      $color-hover: $datatable-action-button-outline-color-hover,
+      $active-background: $datatable-action-button-outline-active-background,
+      $active-border: $datatable-action-button-outline-active-border
+    );
+
+    // allow variable override for outline button bg
+    background: $datatable-action-button-outline-background;
+
+  } @else {
+    @include button-variant(
+      $background: $datatable-action-button-background,
+      $border: $datatable-action-button-border,
+      $hover-background: $datatable-action-button-hover-background,
+      $hover-border: $datatable-action-button-hover-border,
+      $active-background: $datatable-action-button-active-background,
+      $active-border: $datatable-action-button-active-border
+    );
+
+    // allow variable override for solid button color
+    color: $datatable-action-button-color;
+
+    &:hover {
+      color: $datatable-action-button-hover-color;
+    }
+
+    &:not(:disabled):not(.disabled):active {
+      color: $datatable-action-button-active-color;
+    }
   }
+
+  box-shadow: $datatable-action-button-box-shadow;
+  font-size: $datatable-action-button-font-size;
+  line-height: $datatable-action-button-line-height;
+
+  width: $datatable-action-button-width;
+  height: $datatable-action-button-height;
+
+  padding: $datatable-action-button-padding;
+  border-radius: $datatable-action-button-border-radius;
+  text-align: $datatable-action-button-text-align;
 }
 
 /**

package/styles/vendor/ngx-datatable/_themes/bootstrap/_variables.scss

@@ -10,8 +10,12 @@ $datatable-color: $body-color !default;
 
 // common datatable colors
 $datatable-background: $white !default;
-$datatable-box-shadow: none !default;
 $datatable-row-even-background: rgba(0, 0, 0, 0.05) !default;
+$datatable-left-background: transparent !default;
+$datatable-left-row-even-background: $datatable-left-background !default;
+$datatable-right-background: transparent !default;
+$datatable-right-row-even-background: $datatable-right-background !default;
+$datatable-box-shadow: none !default;
 
 // default row and cell background colors
 $datatable-default-background: $white !default;
@@ -167,8 +171,32 @@ $datatable-summary-row-background: #ddd !default;
 $datatable-summary-row-background-hover: #ddd !default;
 $datatable-summary-row-font-weight: bold !default;
 
-$datatable-action-button-color: $body-color !default;
-$datatable-action-button-background: transparent !default;
+// Action Menu Button Styles
+$datatable-action-button-background: $primary !default;
+$datatable-action-button-border: $datatable-action-button-background !default;
+$datatable-action-button-hover-background: darken($datatable-action-button-background, 7.5%) !default;
+$datatable-action-button-hover-border: darken($datatable-action-button-border, 10%) !default;
+$datatable-action-button-active-background: darken($datatable-action-button-background, 10%) !default;
+$datatable-action-button-active-border: darken($datatable-action-button-border, 12.5%) !default;
+
+$datatable-action-button-color: color-yiq($datatable-action-button-background) !default;
+$datatable-action-button-hover-color: color-yiq($datatable-action-button-hover-background) !default;
+$datatable-action-button-active-color: color-yiq($datatable-action-button-active-background) !default;
+
+$datatable-action-button-outline: false !default;
+$datatable-action-button-outline-color: $datatable-action-button-background !default;
+$datatable-action-button-outline-color-hover: color-yiq($datatable-action-button-outline-color) !default;
+$datatable-action-button-outline-active-background: $datatable-action-button-outline-color !default;
+$datatable-action-button-outline-active-border: $datatable-action-button-outline-color !default;
+
+$datatable-action-button-outline-background: transparent !default;
+
 $datatable-action-button-box-shadow: none !default;
-$datatable-action-button-hover-color: $primary !default;
-$datatable-action-button-hover-background: $gray-300 !default;
+$datatable-action-button-font-size: 20px !default;
+$datatable-action-button-line-height: 1 !default;
+$datatable-action-button-size: 30px !default;
+$datatable-action-button-width: $datatable-action-button-size !default;
+$datatable-action-button-height: $datatable-action-button-size !default;
+$datatable-action-button-padding: 0 !default;
+$datatable-action-button-border-radius: 100% !default;
+$datatable-action-button-text-align: center !default;