@theseam/ui-common 0.4.22 → 0.4.24-beta.0

package/fesm2020/theseam-ui-common-layout.mjs

@@ -3,7 +3,8 @@ import * as i0 from '@angular/core';
 import { NgModule, Injectable } from '@angular/core';
 import * as i1 from '@angular/flex-layout';
 import { FlexLayoutModule } from '@angular/flex-layout';
-import { map, startWith, distinctUntilChanged, shareReplay } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import { map, startWith, distinctUntilChanged, shareReplay, switchMap } from 'rxjs/operators';
 
 // TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap
 // breakpoints work the same.
@@ -79,11 +80,19 @@ function observeMediaQuery(mediaObserver, alias) {
 class TheSeamLayoutService {
     constructor(_media) {
         this._media = _media;
-        this.isMobile$ = this.observe('lt-sm');
+        this._mobileBreakpoint = new BehaviorSubject('lt-sm');
+        this.mobileBreakpoint$ = this._mobileBreakpoint.asObservable();
+        this.isMobile$ = this.mobileBreakpoint$.pipe(switchMap(breakpoint => this.observe(breakpoint)), shareReplay({ bufferSize: 1, refCount: true }));
     }
     observe(alias) {
         return observeMediaQuery(this._media, alias);
     }
+    /**
+     * Update breakpoint observed by isMobile$
+     */
+    setMobileBreakpoint(alias) {
+        this._mobileBreakpoint.next(alias);
+    }
 }
 TheSeamLayoutService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamLayoutService, deps: [{ token: i1.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable });
 TheSeamLayoutService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: TheSeamLayoutService, providedIn: 'root' });

package/fesm2020/theseam-ui-common-layout.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theseam-ui-common-layout.mjs","sources":["../../../projects/ui-common/layout/breakpoint-aliases.ts","../../../projects/ui-common/layout/layout.module.ts","../../../projects/ui-common/layout/observe-media-query.ts","../../../projects/ui-common/layout/layout.service.ts","../../../projects/ui-common/layout/theseam-ui-common-layout.ts"],"sourcesContent":["// TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap\n// breakpoints work the same.\n//\n// I like the more spread-out ranges in '@angular/flex-layout', but since our\n// styles are mostly based on bootstrap it may be worth it to drop down closer\n// to the bootstrap breakpoints.\n//\n// Another option is to create new aliases to blend a mix between them, if it\n// doesn't add to much complexity.\n\n/**\n * | breakpoint | mediaQuery                                              |\n * |------------|---------------------------------------------------------|\n * | xs         | 'screen and (max-width: 599px)'                         |\n * | sm         | 'screen and (min-width: 600px) and (max-width: 959px)'  |\n * | md         | 'screen and (min-width: 960px) and (max-width: 1279px)' |\n * | lg         | 'screen and (min-width: 1280px) and (max-width: 1919px)'|\n * | xl         | 'screen and (min-width: 1920px) and (max-width: 5000px)'|\n * |            |                                                         |\n * | lt-sm      | 'screen and (max-width: 599px)'                         |\n * | lt-md      | 'screen and (max-width: 959px)'                         |\n * | lt-lg      | 'screen and (max-width: 1279px)'                        |\n * | lt-xl      | 'screen and (max-width: 1919px)'                        |\n * |            |                                                         |\n * | gt-xs      | 'screen and (min-width: 600px)'                         |\n * | gt-sm      | 'screen and (min-width: 960px)'                         |\n * | gt-md      | 'screen and (min-width: 1280px)'                        |\n * | gt-lg      | 'screen and (min-width: 1920px)'                        |\n */\nexport type MediaQueryAliases =\n  // Breakpoint      MediaQuery\n    'xs' //         'screen and (max-width: 599px)'\n  | 'sm' //         'screen and (min-width: 600px) and (max-width: 959px)'\n  | 'md' //         'screen and (min-width: 960px) and (max-width: 1279px)'\n  | 'lg' //         'screen and (min-width: 1280px) and (max-width: 1919px)'\n  | 'xl' //         'screen and (min-width: 1920px) and (max-width: 5000px)'\n  | 'lt-sm' //      'screen and (max-width: 599px)'\n  | 'lt-md' //      'screen and (max-width: 959px)'\n  | 'lt-lg' //      'screen and (max-width: 1279px)'\n  | 'lt-xl' //      'screen and (max-width: 1919px)'\n  | 'gt-xs' //      'screen and (min-width: 600px)'\n  | 'gt-sm' //      'screen and (min-width: 960px)'\n  | 'gt-md' //      'screen and (min-width: 1280px)'\n  | 'gt-lg' //      'screen and (min-width: 1920px)'\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { FlexLayoutModule } from '@angular/flex-layout'\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule,\n    FlexLayoutModule\n  ],\n  exports: [\n    FlexLayoutModule\n  ]\n})\nexport class TheSeamLayoutModule { }\n","import { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\nimport { distinctUntilChanged, map, shareReplay, startWith, tap } from 'rxjs/operators'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\n\nconst mediaQueriesMap: { [breakpoint: string]: string } = {\n  'xs': 'screen and (max-width: 599px)',\n  'sm': 'screen and (min-width: 600px) and (max-width: 959px)',\n  'md': 'screen and (min-width: 960px) and (max-width: 1279px)',\n  'lg': 'screen and (min-width: 1280px) and (max-width: 1919px)',\n  'xl': 'screen and (min-width: 1920px) and (max-width: 5000px)',\n  'lt-sm': 'screen and (max-width: 599px)',\n  'lt-md': 'screen and (max-width: 959px)',\n  'lt-lg': 'screen and (max-width: 1279px)',\n  'lt-xl': 'screen and (max-width: 1919px)',\n  'gt-xs': 'screen and (min-width: 600px)',\n  'gt-sm': 'screen and (min-width: 960px)',\n  'gt-md': 'screen and (min-width: 1280px)',\n  'gt-lg': 'screen and (min-width: 1920px)'\n}\n\n/**\n * TODO: Find out if the MediaObserver can return an immediate result on load\n * accurately like the native matchMedia. If not switch to another that can or\n * just implement it myself. I would rather use a well tested library for\n * something like that, since it could have a lot of affect on performance.\n */\nfunction isMediaQueryActive(query: string, fallback: MediaObserver) {\n  if (window && window.matchMedia) {\n    const x = window.matchMedia(mediaQueriesMap[query])\n    return x.matches\n  }\n  return fallback.isActive(query)\n}\n\n/**\n * Observable helper for observing a single breakpoint alias with\n * `@angular/flex-layout` MediaObserver.\n */\nexport function observeMediaQuery(\n  mediaObserver: MediaObserver,\n  alias: MediaQueryAliases\n): Observable<boolean> {\n  // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))\n  return mediaObserver.asObservable()\n    .pipe(\n      map(_ => mediaObserver.isActive(alias)),\n      // startWith(mediaObserver.isActive(alias)),\n      startWith(isMediaQueryActive(alias, mediaObserver)),\n      distinctUntilChanged(),\n      shareReplay({ refCount: true, bufferSize: 1 })\n    )\n}\n","import { inject, Injectable, InjectionToken } from '@angular/core'\nimport { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\nimport { observeMediaQuery } from './observe-media-query'\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TheSeamLayoutService {\n\n  /**\n   * Is app a mobile-like size.\n   */\n  public isMobile$: Observable<boolean>\n\n  constructor(\n    private _media: MediaObserver\n  ) {\n    this.isMobile$ = this.observe('lt-sm')\n  }\n\n  public observe(alias: MediaQueryAliases): Observable<boolean> {\n    return observeMediaQuery(this._media, alias)\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"theseam-ui-common-layout.mjs","sources":["../../../projects/ui-common/layout/breakpoint-aliases.ts","../../../projects/ui-common/layout/layout.module.ts","../../../projects/ui-common/layout/observe-media-query.ts","../../../projects/ui-common/layout/layout.service.ts","../../../projects/ui-common/layout/theseam-ui-common-layout.ts"],"sourcesContent":["// TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap\n// breakpoints work the same.\n//\n// I like the more spread-out ranges in '@angular/flex-layout', but since our\n// styles are mostly based on bootstrap it may be worth it to drop down closer\n// to the bootstrap breakpoints.\n//\n// Another option is to create new aliases to blend a mix between them, if it\n// doesn't add to much complexity.\n\n/**\n * | breakpoint | mediaQuery                                              |\n * |------------|---------------------------------------------------------|\n * | xs         | 'screen and (max-width: 599px)'                         |\n * | sm         | 'screen and (min-width: 600px) and (max-width: 959px)'  |\n * | md         | 'screen and (min-width: 960px) and (max-width: 1279px)' |\n * | lg         | 'screen and (min-width: 1280px) and (max-width: 1919px)'|\n * | xl         | 'screen and (min-width: 1920px) and (max-width: 5000px)'|\n * |            |                                                         |\n * | lt-sm      | 'screen and (max-width: 599px)'                         |\n * | lt-md      | 'screen and (max-width: 959px)'                         |\n * | lt-lg      | 'screen and (max-width: 1279px)'                        |\n * | lt-xl      | 'screen and (max-width: 1919px)'                        |\n * |            |                                                         |\n * | gt-xs      | 'screen and (min-width: 600px)'                         |\n * | gt-sm      | 'screen and (min-width: 960px)'                         |\n * | gt-md      | 'screen and (min-width: 1280px)'                        |\n * | gt-lg      | 'screen and (min-width: 1920px)'                        |\n */\nexport type MediaQueryAliases =\n  // Breakpoint      MediaQuery\n    'xs' //         'screen and (max-width: 599px)'\n  | 'sm' //         'screen and (min-width: 600px) and (max-width: 959px)'\n  | 'md' //         'screen and (min-width: 960px) and (max-width: 1279px)'\n  | 'lg' //         'screen and (min-width: 1280px) and (max-width: 1919px)'\n  | 'xl' //         'screen and (min-width: 1920px) and (max-width: 5000px)'\n  | 'lt-sm' //      'screen and (max-width: 599px)'\n  | 'lt-md' //      'screen and (max-width: 959px)'\n  | 'lt-lg' //      'screen and (max-width: 1279px)'\n  | 'lt-xl' //      'screen and (max-width: 1919px)'\n  | 'gt-xs' //      'screen and (min-width: 600px)'\n  | 'gt-sm' //      'screen and (min-width: 960px)'\n  | 'gt-md' //      'screen and (min-width: 1280px)'\n  | 'gt-lg' //      'screen and (min-width: 1920px)'\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\nimport { FlexLayoutModule } from '@angular/flex-layout'\n\n@NgModule({\n  declarations: [],\n  imports: [\n    CommonModule,\n    FlexLayoutModule\n  ],\n  exports: [\n    FlexLayoutModule\n  ]\n})\nexport class TheSeamLayoutModule { }\n","import { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\nimport { distinctUntilChanged, map, shareReplay, startWith, tap } from 'rxjs/operators'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\n\nconst mediaQueriesMap: { [breakpoint: string]: string } = {\n  'xs': 'screen and (max-width: 599px)',\n  'sm': 'screen and (min-width: 600px) and (max-width: 959px)',\n  'md': 'screen and (min-width: 960px) and (max-width: 1279px)',\n  'lg': 'screen and (min-width: 1280px) and (max-width: 1919px)',\n  'xl': 'screen and (min-width: 1920px) and (max-width: 5000px)',\n  'lt-sm': 'screen and (max-width: 599px)',\n  'lt-md': 'screen and (max-width: 959px)',\n  'lt-lg': 'screen and (max-width: 1279px)',\n  'lt-xl': 'screen and (max-width: 1919px)',\n  'gt-xs': 'screen and (min-width: 600px)',\n  'gt-sm': 'screen and (min-width: 960px)',\n  'gt-md': 'screen and (min-width: 1280px)',\n  'gt-lg': 'screen and (min-width: 1920px)'\n}\n\n/**\n * TODO: Find out if the MediaObserver can return an immediate result on load\n * accurately like the native matchMedia. If not switch to another that can or\n * just implement it myself. I would rather use a well tested library for\n * something like that, since it could have a lot of affect on performance.\n */\nfunction isMediaQueryActive(query: string, fallback: MediaObserver) {\n  if (window && window.matchMedia) {\n    const x = window.matchMedia(mediaQueriesMap[query])\n    return x.matches\n  }\n  return fallback.isActive(query)\n}\n\n/**\n * Observable helper for observing a single breakpoint alias with\n * `@angular/flex-layout` MediaObserver.\n */\nexport function observeMediaQuery(\n  mediaObserver: MediaObserver,\n  alias: MediaQueryAliases\n): Observable<boolean> {\n  // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))\n  return mediaObserver.asObservable()\n    .pipe(\n      map(_ => mediaObserver.isActive(alias)),\n      // startWith(mediaObserver.isActive(alias)),\n      startWith(isMediaQueryActive(alias, mediaObserver)),\n      distinctUntilChanged(),\n      shareReplay({ refCount: true, bufferSize: 1 })\n    )\n}\n","import { Injectable } from '@angular/core'\nimport { MediaObserver } from '@angular/flex-layout'\nimport { BehaviorSubject, Observable } from 'rxjs'\nimport { shareReplay, switchMap } from 'rxjs/operators'\n\nimport { MediaQueryAliases } from './breakpoint-aliases'\nimport { observeMediaQuery } from './observe-media-query'\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class TheSeamLayoutService {\n\n  /**\n   * Observes if app is a mobile-like size.\n   * Default mobile breakpoint is <= 599px,\n   * use setMobileBreakpoint() to change size.\n   */\n  public isMobile$: Observable<boolean>\n\n  private _mobileBreakpoint = new BehaviorSubject<MediaQueryAliases>('lt-sm')\n  public mobileBreakpoint$ = this._mobileBreakpoint.asObservable()\n\n  constructor(\n    private _media: MediaObserver\n  ) {\n    this.isMobile$ = this.mobileBreakpoint$.pipe(\n      switchMap(breakpoint => this.observe(breakpoint)),\n      shareReplay({ bufferSize: 1, refCount: true })\n    )\n  }\n\n  public observe(alias: MediaQueryAliases): Observable<boolean> {\n    return observeMediaQuery(this._media, alias)\n  }\n\n  /**\n   * Update breakpoint observed by isMobile$\n   */\n  public setMobileBreakpoint(alias: MediaQueryAliases) {\n    this._mobileBreakpoint.next(alias)\n  }\n\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2020/theseam-ui-common-menu.mjs

@@ -864,6 +864,7 @@ class MenuToggleDirective {
                 overlayY: 'bottom',
             },
         ];
+        this.menuToggle = new EventEmitter();
         // TODO: Figure out how to automatically handle this. I think the offset can
         // be calculated using the first item's offsetTop and borderTop. The problem
         // is that I was only able to calculate it after the animation had started, so
@@ -923,6 +924,7 @@ class MenuToggleDirective {
         // this._overlayRef.backdropClick().subscribe(v => {
         //   console.log('backdropClick', v)
         // })
+        this.menuToggle.emit(true);
     }
     /** The text direction of the containing app. */
     get dir() {
@@ -951,6 +953,7 @@ class MenuToggleDirective {
             this.menu?.closed.emit();
         }
         this._active = false;
+        this.menuToggle.emit(false);
     }
     menuOpen() {
         return (this._overlayRef && this._overlayRef.hasAttached()) ?? false;
@@ -1057,7 +1060,7 @@ class MenuToggleDirective {
     }
 }
 MenuToggleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.7", ngImport: i0, type: MenuToggleDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i1$1.Overlay }, { token: i1.FocusMonitor }, { token: THESEAM_MENU_PANEL, optional: true }, { token: MenuItemComponent, optional: true, self: true }, { token: i4.Directionality, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-MenuToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: MenuToggleDirective, selector: "[seamMenuToggle]", inputs: { menu: ["seamMenuToggle", "menu"], positions: "positions", seamMenuTogglePositionsOffsetY: "seamMenuTogglePositionsOffsetY" }, outputs: { menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_onMouseDown($event)", "keydown": "_onKeydown($event)", "click": "_onClick($event)", "document:keydown": "_onDocumentKeydown($event)" }, properties: { "attr.aria-expanded": "menuOpen() || null", "attr.aria-controls": "menuOpen() ? menu.panelId : null" }, classAttribute: "seam-menu-toggle" }, exportAs: ["seamMenuToggle"], ngImport: i0 });
+MenuToggleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.7", type: MenuToggleDirective, selector: "[seamMenuToggle]", inputs: { menu: ["seamMenuToggle", "menu"], positions: "positions", seamMenuTogglePositionsOffsetY: "seamMenuTogglePositionsOffsetY" }, outputs: { menuToggle: "menuToggle", menuOpened: "menuOpened", menuClosed: "menuClosed" }, host: { attributes: { "aria-haspopup": "true" }, listeners: { "mousedown": "_onMouseDown($event)", "keydown": "_onKeydown($event)", "click": "_onClick($event)", "document:keydown": "_onDocumentKeydown($event)" }, properties: { "attr.aria-expanded": "menuOpen() || null", "attr.aria-controls": "menuOpen() ? menu.panelId : null" }, classAttribute: "seam-menu-toggle" }, exportAs: ["seamMenuToggle"], ngImport: i0 });
 __decorate([
     InputNumber(0)
 ], MenuToggleDirective.prototype, "seamMenuTogglePositionsOffsetY", void 0);
@@ -1090,6 +1093,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
                 args: ['seamMenuToggle']
             }], positions: [{
                 type: Input
+            }], menuToggle: [{
+                type: Output
             }], seamMenuTogglePositionsOffsetY: [{
                 type: Input
             }], menuOpened: [{