@theseam/ui-common 0.4.26 → 0.4.28-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/graphql/datatable/datatable-graphql.service.d.ts

@@ -11,7 +11,7 @@ import * as i0 from "@angular/core";
  * rest should be common options shared by all our app's datatables. This may
  * change if it is determined to be too restrictive.
  */
-export type DatatableQueryOptions<TVariables = OperationVariables, TData = any> = Pick<WatchQueryOptions<TVariables, TData>, 'query'> & Pick<WatchQueryOptions<TVariables, TData>, 'variables'> & Pick<WatchQueryOptions<TVariables, TData>, 'context'>;
+export type DatatableQueryOptions<TVariables extends OperationVariables = OperationVariables, TData = any> = Pick<WatchQueryOptions<TVariables, TData>, 'query'> & Pick<WatchQueryOptions<TVariables, TData>, 'variables'> & Pick<WatchQueryOptions<TVariables, TData>, 'context'>;
 export interface DatatableGraphqlServiceConfig {
     /**
      * Polling interval time in milliseconds.

package/graphql/datatable/index.d.ts

@@ -4,3 +4,6 @@ export * from './datatable-graphql-query-ref';
 export * from './map-filter-states';
 export * from './mapper-context';
 export * from './get-page-info';
+export * from './map-search-date-columns-data-filter-state-to-gql';
+export * from './map-search-numeric-columns-data-filter-state-to-gql';
+export * from './map-search-text-columns-data-filter-state-to-gql';

package/graphql/datatable/map-filter-states.d.ts

@@ -8,8 +8,8 @@ export interface FilterStateMapperFilter {
     [name: string]: any;
 }
 export type FilterStateMapperResult = {
-    filter?: FilterStateMapperFilter | undefined | null;
-    variables?: FilterStateMapperVariables | undefined | null;
+    filter: FilterStateMapperFilter;
+    variables: FilterStateMapperVariables;
 } | null;
 export type FilterStateMapper = (filterState: DataFilterState, context: MapperContext) => (FilterStateMapperResult | Promise<FilterStateMapperResult> | Observable<FilterStateMapperResult>);
 export interface FilterStateMappers {

package/graphql/datatable/map-search-date-columns-data-filter-state-to-gql.d.ts

@@ -0,0 +1,4 @@
+import { ColumnsDataFilterState, TheSeamColumnsDataFilterDateSearchFormState, TheSeamColumnsDataFilterDateSearchOptions } from "@theseam/ui-common/datatable";
+import { FilterStateMapperResult } from "./map-filter-states";
+import { MapperContext } from "./mapper-context";
+export declare const mapSearchDateColumnsDataFilterStateToGql: (filterState: ColumnsDataFilterState<TheSeamColumnsDataFilterDateSearchFormState, TheSeamColumnsDataFilterDateSearchOptions>, context: MapperContext<any>) => FilterStateMapperResult;

package/graphql/datatable/map-search-numeric-columns-data-filter-state-to-gql.d.ts

@@ -0,0 +1,4 @@
+import { ColumnsDataFilterState, TheSeamColumnsDataFilterNumericSearchFormState } from "@theseam/ui-common/datatable";
+import { FilterStateMapperResult } from "./map-filter-states";
+import { MapperContext } from "./mapper-context";
+export declare const mapSearchNumericColumnsDataFilterStateToGql: (filterState: ColumnsDataFilterState<TheSeamColumnsDataFilterNumericSearchFormState>, context: MapperContext<any>) => FilterStateMapperResult;

package/graphql/datatable/map-search-text-columns-data-filter-state-to-gql.d.ts

@@ -0,0 +1,4 @@
+import { ColumnsDataFilterState, TheSeamColumnsDataFilterTextSearchFormState } from "@theseam/ui-common/datatable";
+import { FilterStateMapperResult } from "./map-filter-states";
+import { MapperContext } from "./mapper-context";
+export declare const mapSearchTextColumnsDataFilterStateToGql: (filterState: ColumnsDataFilterState<TheSeamColumnsDataFilterTextSearchFormState>, context: MapperContext<any>) => FilterStateMapperResult;

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.26",
+  "version": "0.4.28-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/popover/popover/popover.component.d.ts

@@ -1,6 +1,7 @@
 import { AnimationEvent } from '@angular/animations';
 import { ChangeDetectorRef, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { Subject } from 'rxjs';
+import { TheSeamPopoverDirective } from '../popover.directive';
 import * as i0 from "@angular/core";
 export declare class PopoverComponent implements OnInit, OnDestroy {
     private _changeDetectorRef;
@@ -25,6 +26,8 @@ export declare class PopoverComponent implements OnInit, OnDestroy {
     get _tabindex(): number;
     template: TemplateRef<any> | undefined | null;
     popoverClass: string | undefined | null;
+    popover: TheSeamPopoverDirective | undefined | null;
+    popoverContext: any;
     /**
      * Defines a width for a popover that will scale down if the window innerWidth is
      * smaller than the value.
@@ -43,5 +46,5 @@ export declare class PopoverComponent implements OnInit, OnDestroy {
     /** Handle a keyboard event from the menu, delegating to the appropriate action. */
     _handleKeydown(event: KeyboardEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "seam-popover", never, { "template": "template"; "popoverClass": "popoverClass"; "baseWidth": "baseWidth"; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "seam-popover", never, { "template": "template"; "popoverClass": "popoverClass"; "popover": "popover"; "popoverContext": "popoverContext"; "baseWidth": "baseWidth"; }, {}, never, never, false, never>;
 }

package/popover/popover.directive.d.ts

@@ -9,6 +9,7 @@ export declare class TheSeamPopoverDirective implements OnDestroy {
     private _focusMonitor;
     private readonly _ngUnsubscribe;
     seamPopover?: TemplateRef<any> | null;
+    seamPopoverContext?: any;
     /**
      * Defines a width for a popover that will scale down if the window innerWidth is
      * smaller than the value.
@@ -56,5 +57,5 @@ export declare class TheSeamPopoverDirective implements OnDestroy {
     /** Returns a stream that emits whenever an action that should close the popover occurs. */
     private _popoverClosingActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamPopoverDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamPopoverDirective, "[seamPopover]", ["seamPopover"], { "seamPopover": "seamPopover"; "seamPopoverBaseWidth": "seamPopoverBaseWidth"; "seamPopoverDisabled": "seamPopoverDisabled"; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TheSeamPopoverDirective, "[seamPopover]", ["seamPopover"], { "seamPopover": "seamPopover"; "seamPopoverContext": "seamPopoverContext"; "seamPopoverBaseWidth": "seamPopoverBaseWidth"; "seamPopoverDisabled": "seamPopoverDisabled"; }, {}, never, never, false, never>;
 }

package/rich-text/rich-text/rich-text.component.d.ts

@@ -1,4 +1,4 @@
-import { AfterViewInit, EventEmitter, OnInit, Provider, Renderer2, TemplateRef } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnDestroy, OnInit, Provider, Renderer2, TemplateRef } from '@angular/core';
 import { ControlValueAccessor, FormControl } from '@angular/forms';
 import { Blur, ContentChange, EditorChangeContent, EditorChangeSelection, Focus, QuillEditorComponent, SelectionChange } from 'ngx-quill';
 import 'quill-mention';
@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { TheSeamCharacterCounterFn, TheSeamQuillEditorConfig, TheSeamQuillMentionMenuItem, TheSeamQuillMentionMenuOption, TheSeamQuillMentionSearchFn, TheSeamQuillMentionSourceFn } from '../utils/models';
 import * as i0 from "@angular/core";
 export declare const RICH_TEXT_VALUE_ACCESSOR: Provider;
-export declare class RichTextComponent implements OnInit, AfterViewInit, ControlValueAccessor {
+export declare class RichTextComponent implements OnInit, AfterViewInit, OnDestroy, ControlValueAccessor {
     private readonly _renderer;
     private _customConfig?;
     onChange: any;
@@ -148,10 +148,11 @@ export declare class RichTextComponent implements OnInit, AfterViewInit, Control
     quillFocus: EventEmitter<Focus>;
     quillBlur: EventEmitter<Blur>;
     mentionsUpdated: EventEmitter<TheSeamQuillMentionMenuOption[]>;
-    get quillEditor(): TemplateRef<QuillEditorComponent> | undefined;
-    set quillEditor(value: TemplateRef<QuillEditorComponent> | undefined);
+    get quillEditor(): QuillEditorComponent | undefined;
+    set quillEditor(value: QuillEditorComponent | undefined);
     private _quillEditor;
     defaultCharacterCounterTpl: TemplateRef<any> | undefined;
+    _handleKeydown(event: KeyboardEvent): void;
     private _isWritingValue;
     private _pollCalculatedRowHeight;
     private _configSet;
@@ -167,6 +168,7 @@ export declare class RichTextComponent implements OnInit, AfterViewInit, Control
     constructor(_renderer: Renderer2, _customConfig?: TheSeamQuillEditorConfig | undefined);
     ngOnInit(): void;
     ngAfterViewInit(): void;
+    ngOnDestroy(): void;
     private _buildQuillConfig;
     private _getConfigOrDefault;
     private _updateQuillConfig;

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;
     }
   }
 
@@ -175,6 +177,11 @@
       font-size: $datatable-header-cell-font-size;
       font-weight: $datatable-header-cell-font-weight;
 
+      .datatable-header-cell-template-wrap {
+        display: flex;
+        align-items: center;
+      }
+
       .datatable-header-cell-wrapper {
         position: relative;
       }
@@ -217,6 +224,27 @@
           border-right: none;
         }
       }
+
+      .datatable-column-header-filter-button {
+        position: relative;
+        color: $datatable-column-header-filter-button-color;
+        &.datatable-column-header-filter-button-active {
+          color: $datatable-column-header-filter-button-active-color;
+          &::before {
+            content: '';
+            position: absolute;
+            right: 0;
+            top: -3px;
+            width: 6px;
+            height: 6px;
+            border-radius: 100%;
+            background: $datatable-column-header-filter-button-active-badge-color;
+          }
+          seam-icon {
+            clip-path: path('M6,0C6,5 12,6 16,3L16,16L0,16L0,0L6,0Z');
+          }
+        }
+      }
     }
 
     .datatable-column-header-separator {
@@ -268,6 +296,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 +507,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,39 @@ $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-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;
 $datatable-action-button-hover-color: $primary !default;
 $datatable-action-button-hover-background: $gray-300 !default;
+
+// colors for column header filter button
+$datatable-column-header-filter-button-color: inherit !default;
+$datatable-column-header-filter-button-active-color: $datatable-column-header-filter-button-color !default;
+$datatable-column-header-filter-button-active-badge-color: $primary !default;