@theseam/ui-common 1.0.2-beta.45 → 1.0.2-beta.48

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.
@@ -1,10 +1,7 @@
1
- import { CommonModule } from '@angular/common';
2
1
  import * as i0 from '@angular/core';
3
- import { NgModule, Injectable } from '@angular/core';
4
- import * as i1 from '@angular/flex-layout';
5
- import { FlexLayoutModule } from '@angular/flex-layout';
6
- import { BehaviorSubject } from 'rxjs';
7
- import { map, startWith, distinctUntilChanged, shareReplay, switchMap } from 'rxjs/operators';
2
+ import { Injectable } from '@angular/core';
3
+ import { Observable, BehaviorSubject } from 'rxjs';
4
+ import { distinctUntilChanged, shareReplay, switchMap } from 'rxjs/operators';
8
5
 
9
6
  // TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap
10
7
  // breakpoints work the same.
@@ -16,20 +13,6 @@ import { map, startWith, distinctUntilChanged, shareReplay, switchMap } from 'rx
16
13
  // Another option is to create new aliases to blend a mix between them, if it
17
14
  // doesn't add to much complexity.
18
15
 
19
- class TheSeamLayoutModule {
20
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
21
- static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, imports: [CommonModule, FlexLayoutModule], exports: [FlexLayoutModule] });
22
- static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, imports: [CommonModule, FlexLayoutModule, FlexLayoutModule] });
23
- }
24
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, decorators: [{
25
- type: NgModule,
26
- args: [{
27
- declarations: [],
28
- imports: [CommonModule, FlexLayoutModule],
29
- exports: [FlexLayoutModule],
30
- }]
31
- }] });
32
-
33
16
  const mediaQueriesMap = {
34
17
  xs: 'screen and (max-width: 599px)',
35
18
  sm: 'screen and (min-width: 600px) and (max-width: 959px)',
@@ -46,31 +29,23 @@ const mediaQueriesMap = {
46
29
  'gt-lg': 'screen and (min-width: 1920px)',
47
30
  };
48
31
  /**
49
- * TODO: Find out if the MediaObserver can return an immediate result on load
50
- * accurately like the native matchMedia. If not switch to another that can or
51
- * just implement it myself. I would rather use a well tested library for
52
- * something like that, since it could have a lot of affect on performance.
53
- */
54
- function isMediaQueryActive(query, fallback) {
55
- if (window && window.matchMedia) {
56
- const x = window.matchMedia(mediaQueriesMap[query]);
57
- return x.matches;
58
- }
59
- return fallback.isActive(query);
60
- }
61
- /**
62
- * Observable helper for observing a single breakpoint alias with
63
- * `@angular/flex-layout` MediaObserver.
32
+ * Observable helper for observing a single breakpoint alias using native
33
+ * `window.matchMedia`.
64
34
  */
65
- function observeMediaQuery(mediaObserver, alias) {
66
- // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))
67
- return mediaObserver.asObservable().pipe(map((_) => mediaObserver.isActive(alias)),
68
- // startWith(mediaObserver.isActive(alias)),
69
- startWith(isMediaQueryActive(alias, mediaObserver)), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
35
+ function observeMediaQuery(alias) {
36
+ const query = mediaQueriesMap[alias];
37
+ return new Observable((subscriber) => {
38
+ const mql = window.matchMedia(query);
39
+ subscriber.next(mql.matches);
40
+ const handler = (event) => {
41
+ subscriber.next(event.matches);
42
+ };
43
+ mql.addEventListener('change', handler);
44
+ return () => mql.removeEventListener('change', handler);
45
+ }).pipe(distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
70
46
  }
71
47
 
72
48
  class TheSeamLayoutService {
73
- _media;
74
49
  /**
75
50
  * Observes if app is a mobile-like size.
76
51
  * Default mobile breakpoint is <= 599px,
@@ -79,12 +54,11 @@ class TheSeamLayoutService {
79
54
  isMobile$;
80
55
  _mobileBreakpoint = new BehaviorSubject('lt-sm');
81
56
  mobileBreakpoint$ = this._mobileBreakpoint.asObservable();
82
- constructor(_media) {
83
- this._media = _media;
57
+ constructor() {
84
58
  this.isMobile$ = this.mobileBreakpoint$.pipe(switchMap((breakpoint) => this.observe(breakpoint)), shareReplay({ bufferSize: 1, refCount: true }));
85
59
  }
86
60
  observe(alias) {
87
- return observeMediaQuery(this._media, alias);
61
+ return observeMediaQuery(alias);
88
62
  }
89
63
  /**
90
64
  * Update breakpoint observed by isMobile$
@@ -92,7 +66,7 @@ class TheSeamLayoutService {
92
66
  setMobileBreakpoint(alias) {
93
67
  this._mobileBreakpoint.next(alias);
94
68
  }
95
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutService, deps: [{ token: i1.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable });
69
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
96
70
  static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutService, providedIn: 'root' });
97
71
  }
98
72
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutService, decorators: [{
@@ -100,11 +74,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
100
74
  args: [{
101
75
  providedIn: 'root',
102
76
  }]
103
- }], ctorParameters: () => [{ type: i1.MediaObserver }] });
77
+ }], ctorParameters: () => [] });
104
78
 
105
79
  /**
106
80
  * Generated bundle index. Do not edit.
107
81
  */
108
82
 
109
- export { TheSeamLayoutModule, TheSeamLayoutService, observeMediaQuery };
83
+ export { TheSeamLayoutService, observeMediaQuery };
110
84
  //# sourceMappingURL=theseam-ui-common-layout.mjs.map
@@ -1 +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: [CommonModule, FlexLayoutModule],\n exports: [FlexLayoutModule],\n})\nexport class TheSeamLayoutModule {}\n","import { MediaObserver } from '@angular/flex-layout'\nimport { Observable } from 'rxjs'\nimport {\n distinctUntilChanged,\n map,\n shareReplay,\n startWith,\n tap,\n} 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().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 * 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(private _media: MediaObserver) {\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 * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"theseam-ui-common-layout.mjs","sources":["../../../projects/ui-common/layout/breakpoint-aliases.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 { Observable } from 'rxjs'\nimport { distinctUntilChanged, shareReplay } 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 * Observable helper for observing a single breakpoint alias using native\n * `window.matchMedia`.\n */\nexport function observeMediaQuery(\n alias: MediaQueryAliases,\n): Observable<boolean> {\n const query = mediaQueriesMap[alias]\n\n return new Observable<boolean>((subscriber) => {\n const mql = window.matchMedia(query)\n subscriber.next(mql.matches)\n\n const handler = (event: MediaQueryListEvent) => {\n subscriber.next(event.matches)\n }\n\n mql.addEventListener('change', handler)\n return () => mql.removeEventListener('change', handler)\n }).pipe(\n distinctUntilChanged(),\n shareReplay({ refCount: true, bufferSize: 1 }),\n )\n}\n","import { Injectable } from '@angular/core'\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 * 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 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(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 * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;ACHA,MAAM,eAAe,GAAqC;AACxD,IAAA,EAAE,EAAE,+BAA+B;AACnC,IAAA,EAAE,EAAE,sDAAsD;AAC1D,IAAA,EAAE,EAAE,uDAAuD;AAC3D,IAAA,EAAE,EAAE,wDAAwD;AAC5D,IAAA,EAAE,EAAE,wDAAwD;AAC5D,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,OAAO,EAAE,gCAAgC;AACzC,IAAA,OAAO,EAAE,gCAAgC;AACzC,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,OAAO,EAAE,+BAA+B;AACxC,IAAA,OAAO,EAAE,gCAAgC;AACzC,IAAA,OAAO,EAAE,gCAAgC;CAC1C;AAED;;;AAGG;AACG,SAAU,iBAAiB,CAC/B,KAAwB,EAAA;AAExB,IAAA,MAAM,KAAK,GAAG,eAAe,CAAC,KAAK,CAAC;AAEpC,IAAA,OAAO,IAAI,UAAU,CAAU,CAAC,UAAU,KAAI;QAC5C,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC;AACpC,QAAA,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC;AAE5B,QAAA,MAAM,OAAO,GAAG,CAAC,KAA0B,KAAI;AAC7C,YAAA,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAChC,QAAA,CAAC;AAED,QAAA,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC;QACvC,OAAO,MAAM,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzD,CAAC,CAAC,CAAC,IAAI,CACL,oBAAoB,EAAE,EACtB,WAAW,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,CAC/C;AACH;;MClCa,oBAAoB,CAAA;AAC/B;;;;AAIG;AACI,IAAA,SAAS;AAER,IAAA,iBAAiB,GAAG,IAAI,eAAe,CAAoB,OAAO,CAAC;AACpE,IAAA,iBAAiB,GAAG,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE;AAEhE,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAC1C,SAAS,CAAC,CAAC,UAAU,KAAK,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,EACnD,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAC/C;IACH;AAEO,IAAA,OAAO,CAAC,KAAwB,EAAA;AACrC,QAAA,OAAO,iBAAiB,CAAC,KAAK,CAAC;IACjC;AAEA;;AAEG;AACI,IAAA,mBAAmB,CAAC,KAAwB,EAAA;AACjD,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC;IACpC;wGA3BW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;AAApB,IAAA,OAAA,KAAA,GAAA,EAAA,CAAA,qBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,oBAAoB,cAFnB,MAAM,EAAA,CAAA;;4FAEP,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAHhC,UAAU;AAAC,YAAA,IAAA,EAAA,CAAA;AACV,oBAAA,UAAU,EAAE,MAAM;AACnB,iBAAA;;;ACTD;;AAEG;;;;"}
@@ -3,8 +3,6 @@ import { Directive, Injectable, Input, Component, TemplateRef, ContentChild, Eve
3
3
  import { NgIf, NgTemplateOutlet, NgFor, AsyncPipe } from '@angular/common';
4
4
  import * as i2 from '@angular/router';
5
5
  import { RouterModule } from '@angular/router';
6
- import { FlexLayoutModule } from '@angular/flex-layout';
7
- import * as i3 from '@angular/flex-layout/flex';
8
6
  import { __decorate } from 'tslib';
9
7
  import { InputBoolean } from '@theseam/ui-common/core';
10
8
  import { BehaviorSubject, shareReplay, combineLatest, tap } from 'rxjs';
@@ -87,11 +85,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
87
85
  class TheSeamTabbedContentComponent {
88
86
  tabbedItem;
89
87
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTabbedContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
90
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamTabbedContentComponent, isStandalone: true, selector: "seam-tabbed-content", inputs: { tabbedItem: "tabbedItem" }, ngImport: i0, template: "<div fxFlexFill>\n <ng-container *ngIf=\"tabbedItem\">\n <ng-template\n *ngIf=\"tabbedItem.tabbedContentTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedContentTpl\"\n ></ng-template>\n <ng-container *ngIf=\"tabbedItem.contentFromRoute\"\n ><router-outlet></router-outlet\n ></ng-container>\n </ng-container>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }] });
88
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamTabbedContentComponent, isStandalone: true, selector: "seam-tabbed-content", inputs: { tabbedItem: "tabbedItem" }, ngImport: i0, template: "<div class=\"tabbed-content-root\">\n <ng-container *ngIf=\"tabbedItem\">\n <ng-template\n *ngIf=\"tabbedItem.tabbedContentTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedContentTpl\"\n ></ng-template>\n <ng-container *ngIf=\"tabbedItem.contentFromRoute\"\n ><router-outlet></router-outlet\n ></ng-container>\n </ng-container>\n</div>\n", styles: [".tabbed-content-root{flex:1 1 100%;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
91
89
  }
92
90
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTabbedContentComponent, decorators: [{
93
91
  type: Component,
94
- args: [{ selector: 'seam-tabbed-content', imports: [NgIf, NgTemplateOutlet, RouterModule, FlexLayoutModule], template: "<div fxFlexFill>\n <ng-container *ngIf=\"tabbedItem\">\n <ng-template\n *ngIf=\"tabbedItem.tabbedContentTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedContentTpl\"\n ></ng-template>\n <ng-container *ngIf=\"tabbedItem.contentFromRoute\"\n ><router-outlet></router-outlet\n ></ng-container>\n </ng-container>\n</div>\n" }]
92
+ args: [{ selector: 'seam-tabbed-content', imports: [NgIf, NgTemplateOutlet, RouterModule], template: "<div class=\"tabbed-content-root\">\n <ng-container *ngIf=\"tabbedItem\">\n <ng-template\n *ngIf=\"tabbedItem.tabbedContentTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedContentTpl\"\n ></ng-template>\n <ng-container *ngIf=\"tabbedItem.contentFromRoute\"\n ><router-outlet></router-outlet\n ></ng-container>\n </ng-container>\n</div>\n", styles: [".tabbed-content-root{flex:1 1 100%;width:100%;height:100%}\n"] }]
95
93
  }], propDecorators: { tabbedItem: [{
96
94
  type: Input
97
95
  }] } });
@@ -227,7 +225,7 @@ class TheSeamTabbedComponent {
227
225
  }
228
226
  }
229
227
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTabbedComponent, deps: [{ token: TheSeamTabbedService }, { token: i2.Router }, { token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component });
230
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamTabbedComponent, isStandalone: true, selector: "seam-tabbed", inputs: { direction: "direction", hideTabs: "hideTabs", onlyRouteContent: "onlyRouteContent", activeTabName: "activeTabName" }, outputs: { tabChanged: "tabChanged" }, providers: [TheSeamTabbedService], queries: [{ propertyName: "tabbedItems", predicate: TheSeamTabbedItemComponent }], ngImport: i0, template: "<div [fxLayout]=\"direction === 'horizontal' ? 'column' : 'row'\" fxFlexFill>\n <!-- Tabs -->\n <div\n *ngIf=\"!hideTabs\"\n [fxLayout]=\"direction === 'horizontal' ? 'row' : 'column'\"\n style=\"position: relative\"\n >\n <ng-container *ngFor=\"let tabbedItem of tabbedItems$ | async\">\n <div\n class=\"tabbed-tab pt-2 pb-2 pl-4 pr-4 bg-light text-nowrap\"\n [class.tab-dir-horizontal]=\"direction === 'horizontal'\"\n [class.tab-dir-vertical]=\"direction === 'vertical'\"\n (click)=\"onClickTab($event, tabbedItem)\"\n [class.active]=\"tabbedItem === (selectedTab$ | async)\"\n >\n <ng-template\n *ngIf=\"tabbedItem.tabbedTabTpl; else tabLabelTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedTabTpl\"\n ></ng-template>\n <ng-template #tabLabelTpl>{{ tabbedItem?.label }}</ng-template>\n </div>\n </ng-container>\n </div>\n\n <!-- Tabs Content -->\n <div class=\"tabbed-tabs-content bg-light\">\n <ng-container *ngIf=\"onlyRouteContent; else notOnlyRouteContent\">\n <router-outlet></router-outlet>\n </ng-container>\n <ng-template #notOnlyRouteContent>\n <ng-container *ngIf=\"selectedTab$ | async as selectedTab\">\n <seam-tabbed-content\n fxFlexFill\n [tabbedItem]=\"selectedTab\"\n ></seam-tabbed-content>\n </ng-container>\n </ng-template>\n </div>\n</div>\n", styles: [":host{display:block}.tabbed-tab{box-sizing:border-box;font-weight:400;font-size:10pt;min-width:130px;transform:translateZ(0);overflow:hidden;border:1px solid #dee2e6}.tabbed-tab:not(.active){background-color:#fff!important}.tabbed-tab.active{font-weight:700;color:#357ebd}.tabbed-tab:hover{cursor:pointer}.tabbed-tab.tab-dir-horizontal{border-bottom:0}.tabbed-tab.tab-dir-horizontal:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-horizontal:last-child{border-top-right-radius:.25rem}.tabbed-tab.tab-dir-horizontal:not(:last-child){border-right:0}.tabbed-tab.tab-dir-horizontal.active{margin-bottom:-2px}.tabbed-tab.tab-dir-vertical{border-right:0}.tabbed-tab.tab-dir-vertical:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:last-child{border-bottom-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:not(:last-child){border-bottom:0}.tabbed-tab.tab-dir-vertical.active{margin-right:-2px}.tabbed-tabs-content{display:block;flex:1 1 auto;overflow:hidden;border:1px solid #dee2e6;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: FlexLayoutModule }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.FlexFillDirective, selector: "[fxFill], [fxFlexFill]" }, { kind: "component", type: TheSeamTabbedContentComponent, selector: "seam-tabbed-content", inputs: ["tabbedItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
228
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: TheSeamTabbedComponent, isStandalone: true, selector: "seam-tabbed", inputs: { direction: "direction", hideTabs: "hideTabs", onlyRouteContent: "onlyRouteContent", activeTabName: "activeTabName" }, outputs: { tabChanged: "tabChanged" }, providers: [TheSeamTabbedService], queries: [{ propertyName: "tabbedItems", predicate: TheSeamTabbedItemComponent }], ngImport: i0, template: "<div\n class=\"tabbed-root\"\n [style.flex-direction]=\"direction === 'horizontal' ? 'column' : 'row'\"\n>\n <!-- Tabs -->\n <div\n *ngIf=\"!hideTabs\"\n class=\"tabbed-tabs\"\n [style.flex-direction]=\"direction === 'horizontal' ? 'row' : 'column'\"\n >\n <ng-container *ngFor=\"let tabbedItem of tabbedItems$ | async\">\n <div\n class=\"tabbed-tab pt-2 pb-2 pl-4 pr-4 bg-light text-nowrap\"\n [class.tab-dir-horizontal]=\"direction === 'horizontal'\"\n [class.tab-dir-vertical]=\"direction === 'vertical'\"\n (click)=\"onClickTab($event, tabbedItem)\"\n [class.active]=\"tabbedItem === (selectedTab$ | async)\"\n >\n <ng-template\n *ngIf=\"tabbedItem.tabbedTabTpl; else tabLabelTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedTabTpl\"\n ></ng-template>\n <ng-template #tabLabelTpl>{{ tabbedItem?.label }}</ng-template>\n </div>\n </ng-container>\n </div>\n\n <!-- Tabs Content -->\n <div class=\"tabbed-tabs-content bg-light\">\n <ng-container *ngIf=\"onlyRouteContent; else notOnlyRouteContent\">\n <router-outlet></router-outlet>\n </ng-container>\n <ng-template #notOnlyRouteContent>\n <ng-container *ngIf=\"selectedTab$ | async as selectedTab\">\n <seam-tabbed-content\n class=\"tabbed-content-fill\"\n [tabbedItem]=\"selectedTab\"\n ></seam-tabbed-content>\n </ng-container>\n </ng-template>\n </div>\n</div>\n", styles: [":host{display:block}.tabbed-root{display:flex;flex:1 1 100%;width:100%;height:100%}.tabbed-tabs{display:flex;position:relative}.tabbed-content-fill{flex:1 1 100%;width:100%;height:100%}.tabbed-tab{box-sizing:border-box;font-weight:400;font-size:10pt;min-width:130px;transform:translateZ(0);overflow:hidden;border:1px solid #dee2e6}.tabbed-tab:not(.active){background-color:#fff!important}.tabbed-tab.active{font-weight:700;color:#357ebd}.tabbed-tab:hover{cursor:pointer}.tabbed-tab.tab-dir-horizontal{border-bottom:0}.tabbed-tab.tab-dir-horizontal:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-horizontal:last-child{border-top-right-radius:.25rem}.tabbed-tab.tab-dir-horizontal:not(:last-child){border-right:0}.tabbed-tab.tab-dir-horizontal.active{margin-bottom:-2px}.tabbed-tab.tab-dir-vertical{border-right:0}.tabbed-tab.tab-dir-vertical:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:last-child{border-bottom-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:not(:last-child){border-bottom:0}.tabbed-tab.tab-dir-vertical.active{margin-right:-2px}.tabbed-tabs-content{display:block;flex:1 1 auto;overflow:hidden;border:1px solid #dee2e6;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: TheSeamTabbedContentComponent, selector: "seam-tabbed-content", inputs: ["tabbedItem"] }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
231
229
  }
232
230
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTabbedComponent, decorators: [{
233
231
  type: Component,
@@ -236,9 +234,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
236
234
  NgFor,
237
235
  AsyncPipe,
238
236
  RouterModule,
239
- FlexLayoutModule,
240
237
  TheSeamTabbedContentComponent,
241
- ], template: "<div [fxLayout]=\"direction === 'horizontal' ? 'column' : 'row'\" fxFlexFill>\n <!-- Tabs -->\n <div\n *ngIf=\"!hideTabs\"\n [fxLayout]=\"direction === 'horizontal' ? 'row' : 'column'\"\n style=\"position: relative\"\n >\n <ng-container *ngFor=\"let tabbedItem of tabbedItems$ | async\">\n <div\n class=\"tabbed-tab pt-2 pb-2 pl-4 pr-4 bg-light text-nowrap\"\n [class.tab-dir-horizontal]=\"direction === 'horizontal'\"\n [class.tab-dir-vertical]=\"direction === 'vertical'\"\n (click)=\"onClickTab($event, tabbedItem)\"\n [class.active]=\"tabbedItem === (selectedTab$ | async)\"\n >\n <ng-template\n *ngIf=\"tabbedItem.tabbedTabTpl; else tabLabelTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedTabTpl\"\n ></ng-template>\n <ng-template #tabLabelTpl>{{ tabbedItem?.label }}</ng-template>\n </div>\n </ng-container>\n </div>\n\n <!-- Tabs Content -->\n <div class=\"tabbed-tabs-content bg-light\">\n <ng-container *ngIf=\"onlyRouteContent; else notOnlyRouteContent\">\n <router-outlet></router-outlet>\n </ng-container>\n <ng-template #notOnlyRouteContent>\n <ng-container *ngIf=\"selectedTab$ | async as selectedTab\">\n <seam-tabbed-content\n fxFlexFill\n [tabbedItem]=\"selectedTab\"\n ></seam-tabbed-content>\n </ng-container>\n </ng-template>\n </div>\n</div>\n", styles: [":host{display:block}.tabbed-tab{box-sizing:border-box;font-weight:400;font-size:10pt;min-width:130px;transform:translateZ(0);overflow:hidden;border:1px solid #dee2e6}.tabbed-tab:not(.active){background-color:#fff!important}.tabbed-tab.active{font-weight:700;color:#357ebd}.tabbed-tab:hover{cursor:pointer}.tabbed-tab.tab-dir-horizontal{border-bottom:0}.tabbed-tab.tab-dir-horizontal:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-horizontal:last-child{border-top-right-radius:.25rem}.tabbed-tab.tab-dir-horizontal:not(:last-child){border-right:0}.tabbed-tab.tab-dir-horizontal.active{margin-bottom:-2px}.tabbed-tab.tab-dir-vertical{border-right:0}.tabbed-tab.tab-dir-vertical:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:last-child{border-bottom-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:not(:last-child){border-bottom:0}.tabbed-tab.tab-dir-vertical.active{margin-right:-2px}.tabbed-tabs-content{display:block;flex:1 1 auto;overflow:hidden;border:1px solid #dee2e6;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}\n"] }]
238
+ ], template: "<div\n class=\"tabbed-root\"\n [style.flex-direction]=\"direction === 'horizontal' ? 'column' : 'row'\"\n>\n <!-- Tabs -->\n <div\n *ngIf=\"!hideTabs\"\n class=\"tabbed-tabs\"\n [style.flex-direction]=\"direction === 'horizontal' ? 'row' : 'column'\"\n >\n <ng-container *ngFor=\"let tabbedItem of tabbedItems$ | async\">\n <div\n class=\"tabbed-tab pt-2 pb-2 pl-4 pr-4 bg-light text-nowrap\"\n [class.tab-dir-horizontal]=\"direction === 'horizontal'\"\n [class.tab-dir-vertical]=\"direction === 'vertical'\"\n (click)=\"onClickTab($event, tabbedItem)\"\n [class.active]=\"tabbedItem === (selectedTab$ | async)\"\n >\n <ng-template\n *ngIf=\"tabbedItem.tabbedTabTpl; else tabLabelTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedTabTpl\"\n ></ng-template>\n <ng-template #tabLabelTpl>{{ tabbedItem?.label }}</ng-template>\n </div>\n </ng-container>\n </div>\n\n <!-- Tabs Content -->\n <div class=\"tabbed-tabs-content bg-light\">\n <ng-container *ngIf=\"onlyRouteContent; else notOnlyRouteContent\">\n <router-outlet></router-outlet>\n </ng-container>\n <ng-template #notOnlyRouteContent>\n <ng-container *ngIf=\"selectedTab$ | async as selectedTab\">\n <seam-tabbed-content\n class=\"tabbed-content-fill\"\n [tabbedItem]=\"selectedTab\"\n ></seam-tabbed-content>\n </ng-container>\n </ng-template>\n </div>\n</div>\n", styles: [":host{display:block}.tabbed-root{display:flex;flex:1 1 100%;width:100%;height:100%}.tabbed-tabs{display:flex;position:relative}.tabbed-content-fill{flex:1 1 100%;width:100%;height:100%}.tabbed-tab{box-sizing:border-box;font-weight:400;font-size:10pt;min-width:130px;transform:translateZ(0);overflow:hidden;border:1px solid #dee2e6}.tabbed-tab:not(.active){background-color:#fff!important}.tabbed-tab.active{font-weight:700;color:#357ebd}.tabbed-tab:hover{cursor:pointer}.tabbed-tab.tab-dir-horizontal{border-bottom:0}.tabbed-tab.tab-dir-horizontal:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-horizontal:last-child{border-top-right-radius:.25rem}.tabbed-tab.tab-dir-horizontal:not(:last-child){border-right:0}.tabbed-tab.tab-dir-horizontal.active{margin-bottom:-2px}.tabbed-tab.tab-dir-vertical{border-right:0}.tabbed-tab.tab-dir-vertical:first-child{border-top-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:last-child{border-bottom-left-radius:.25rem}.tabbed-tab.tab-dir-vertical:not(:last-child){border-bottom:0}.tabbed-tab.tab-dir-vertical.active{margin-right:-2px}.tabbed-tabs-content{display:block;flex:1 1 auto;overflow:hidden;border:1px solid #dee2e6;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem}\n"] }]
242
239
  }], ctorParameters: () => [{ type: TheSeamTabbedService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { tabbedItems: [{
243
240
  type: ContentChildren,
244
241
  args: [TheSeamTabbedItemComponent]
@@ -1 +1 @@
1
- {"version":3,"file":"theseam-ui-common-tabbed.mjs","sources":["../../../projects/ui-common/tabbed/directives/tabbed-tab-content.directive.ts","../../../projects/ui-common/tabbed/tabbed.service.ts","../../../projects/ui-common/tabbed/directives/tabbed-tab.directive.ts","../../../projects/ui-common/tabbed/tabbed-content/tabbed-content.component.ts","../../../projects/ui-common/tabbed/tabbed-content/tabbed-content.component.html","../../../projects/ui-common/tabbed/tabbed-item/tabbed-item.component.ts","../../../projects/ui-common/tabbed/tabbed-item/tabbed-item.component.html","../../../projects/ui-common/tabbed/tabbed.component.ts","../../../projects/ui-common/tabbed/tabbed.component.html","../../../projects/ui-common/tabbed/tabbed.module.ts","../../../projects/ui-common/tabbed/theseam-ui-common-tabbed.ts"],"sourcesContent":["import { Directive } from '@angular/core'\n\nimport { TheSeamTabbedTabContentAccessor } from '../tabbed-models'\n\n@Directive({\n selector: '[seamTabbedTabContent]',\n exportAs: 'seamTabbedTabContent',\n})\nexport class TheSeamTabbedTabContentDirective\n implements TheSeamTabbedTabContentAccessor\n{\n public isActive = false\n}\n","import { Injectable } from '@angular/core'\n\nimport { TheSeamTabbedComponent } from './tabbed.component'\n\nexport declare type TheSeamTabsDirection = 'horizontal' | 'vertical'\n\n@Injectable()\nexport class TheSeamTabbedService {\n private _tabGroups: { [groupName: string]: TheSeamTabbedComponent[] } = {}\n\n public registerTab(tab: TheSeamTabbedComponent, groupName: string) {\n if (!this._tabGroups[groupName]) {\n this._tabGroups[groupName] = []\n }\n\n for (const t of this._tabGroups[groupName]) {\n t.hideTabs = true\n }\n\n this._tabGroups[groupName].push(tab)\n }\n\n public unregisterTab(tab: TheSeamTabbedComponent, groupName: string) {\n if (this._tabGroups[groupName]) {\n this._tabGroups[groupName] = this._tabGroups[groupName].filter(\n (t) => t !== tab,\n )\n\n if (this._tabGroups[groupName].length > 0) {\n this._tabGroups[groupName][\n this._tabGroups[groupName].length - 1\n ].hideTabs = false\n }\n }\n }\n}\n","import { Directive, ElementRef, HostBinding, OnInit } from '@angular/core'\n\nimport { TheSeamTabbedTabAccessor } from '../tabbed-models'\nimport { TheSeamTabbedComponent } from '../tabbed.component'\nimport { TheSeamTabbedService } from '../tabbed.service'\n\n@Directive({\n selector: '[seamTabbedTab]',\n exportAs: 'seamTabbedTab',\n})\nexport class TheSeamTabbedTabDirective\n implements OnInit, TheSeamTabbedTabAccessor\n{\n // @HostBinding('class.custom-invalid')\n // get customInvalid() { return this.control.invalid }\n\n public isActive = false\n\n constructor(\n public elementRef: ElementRef,\n // public host: TheSeamTabbedComponent,\n public tabbedService: TheSeamTabbedService,\n ) {}\n\n ngOnInit() {\n // this.tabbedService.selectedTab.subscribe(tab => {\n // console.log('tab: ', tab)\n // console.log('tab.tabbedTabTpl.elementRef: ', tab.tabbedTabTpl.elementRef)\n // console.log('this.elementRef: ', this.elementRef)\n // if (tab.tabbedTabTpl.elementRef.na === this.elementRef) {\n // this.isActive = true\n // } else {\n // this.isActive = false\n // }\n // })\n }\n}\n","import { Component, Input } from '@angular/core'\nimport { NgIf, NgTemplateOutlet } from '@angular/common'\nimport { RouterModule } from '@angular/router'\nimport { FlexLayoutModule } from '@angular/flex-layout'\n\nimport { TheSeamTabbedItemAccessor } from '../tabbed-models'\n\n@Component({\n selector: 'seam-tabbed-content',\n templateUrl: './tabbed-content.component.html',\n styleUrls: ['./tabbed-content.component.scss'],\n imports: [NgIf, NgTemplateOutlet, RouterModule, FlexLayoutModule],\n})\nexport class TheSeamTabbedContentComponent {\n @Input() tabbedItem?: TheSeamTabbedItemAccessor\n}\n","<div fxFlexFill>\n <ng-container *ngIf=\"tabbedItem\">\n <ng-template\n *ngIf=\"tabbedItem.tabbedContentTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedContentTpl\"\n ></ng-template>\n <ng-container *ngIf=\"tabbedItem.contentFromRoute\"\n ><router-outlet></router-outlet\n ></ng-container>\n </ng-container>\n</div>\n","import { BooleanInput } from '@angular/cdk/coercion'\nimport { Component, ContentChild, Input, TemplateRef } from '@angular/core'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\n\nimport { TheSeamTabbedTabContentDirective } from '../directives/tabbed-tab-content.directive'\nimport { TheSeamTabbedTabDirective } from '../directives/tabbed-tab.directive'\nimport { TheSeamTabbedItemAccessor } from '../tabbed-models'\n\n@Component({\n selector: 'seam-tabbed-item',\n templateUrl: './tabbed-item.component.html',\n styleUrls: ['./tabbed-item.component.scss'],\n})\nexport class TheSeamTabbedItemComponent implements TheSeamTabbedItemAccessor {\n static ngAcceptInputType_contentFromRoute: BooleanInput\n\n @ContentChild(TheSeamTabbedTabDirective, { read: TemplateRef, static: true })\n public tabbedTabTpl?: TemplateRef<TheSeamTabbedTabDirective>\n\n @ContentChild(TheSeamTabbedTabContentDirective, {\n read: TemplateRef,\n static: true,\n })\n public tabbedContentTpl?: TemplateRef<TheSeamTabbedTabContentDirective>\n\n @Input() name: string | undefined | null\n @Input() label: string | undefined | null\n @Input() @InputBoolean() contentFromRoute = false\n}\n","","import {\n AfterContentInit,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n} from '@angular/core'\nimport { AsyncPipe, NgFor, NgIf } from '@angular/common'\nimport { ActivatedRoute, Router, RouterModule } from '@angular/router'\nimport { FlexLayoutModule } from '@angular/flex-layout'\nimport { BehaviorSubject, combineLatest, shareReplay, tap } from 'rxjs'\n\nimport { isNullOrUndefined } from '@theseam/ui-common/utils'\n\nimport { TheSeamTabbedItemComponent } from './tabbed-item/tabbed-item.component'\nimport { TheSeamTabbedContentComponent } from './tabbed-content/tabbed-content.component'\nimport { TheSeamTabbedService, TheSeamTabsDirection } from './tabbed.service'\n\n@Component({\n selector: 'seam-tabbed',\n templateUrl: './tabbed.component.html',\n styleUrls: ['./tabbed.component.scss'],\n providers: [TheSeamTabbedService],\n imports: [\n NgIf,\n NgFor,\n AsyncPipe,\n RouterModule,\n FlexLayoutModule,\n TheSeamTabbedContentComponent,\n ],\n})\nexport class TheSeamTabbedComponent\n implements OnInit, AfterContentInit, OnDestroy\n{\n private _direction: TheSeamTabsDirection = 'vertical'\n private _hideTabs = false\n\n @ContentChildren(TheSeamTabbedItemComponent)\n set tabbedItems(val: QueryList<TheSeamTabbedItemComponent> | undefined) {\n this._tabbedItems.next(val)\n }\n get tabbedItems(): QueryList<TheSeamTabbedItemComponent> | undefined {\n return this._tabbedItems.value\n }\n private readonly _tabbedItems = new BehaviorSubject<\n QueryList<TheSeamTabbedItemComponent> | undefined\n >(undefined)\n public readonly tabbedItems$ = this._tabbedItems.asObservable()\n\n @Output() tabChanged = new EventEmitter<TheSeamTabbedItemComponent>()\n\n @Input()\n set direction(val: TheSeamTabsDirection) {\n this._direction = val\n }\n get direction() {\n return this._direction\n }\n\n @Input()\n set hideTabs(val: boolean) {\n setTimeout(() => {\n this._hideTabs = val\n })\n }\n get hideTabs(): boolean {\n return this._hideTabs\n }\n\n @Input()\n public onlyRouteContent = false\n\n get selectedTab(): TheSeamTabbedItemComponent | undefined {\n if (this.onlyRouteContent) {\n if (this._route.snapshot.children.length > 0) {\n const config = this._route.snapshot.children[0].routeConfig\n const childPath = config && config.path\n return this.tabbedItems?.find((t) => t.name === childPath)\n }\n } else {\n return this._selectedTab.value\n }\n }\n set selectedTab(tab: TheSeamTabbedItemComponent | undefined) {\n this._selectedTab.next(tab)\n }\n private readonly _selectedTab = new BehaviorSubject<\n TheSeamTabbedItemComponent | undefined\n >(undefined)\n public readonly selectedTab$ = this._selectedTab\n .asObservable()\n .pipe(shareReplay({ bufferSize: 1, refCount: true }))\n\n @Input()\n set activeTabName(val: string) {\n this._activeTabName.next(val)\n }\n private readonly _activeTabName = new BehaviorSubject<string | undefined>(\n undefined,\n )\n private readonly activeTabName$ = this._activeTabName.asObservable()\n\n constructor(\n private readonly _tabbedService: TheSeamTabbedService,\n private readonly _router: Router,\n private readonly _route: ActivatedRoute,\n ) {}\n\n ngOnInit() {\n this._tabbedService.registerTab(this, 'main')\n }\n\n ngOnDestroy() {\n this._tabbedService.unregisterTab(this, 'main')\n }\n\n ngAfterContentInit() {\n combineLatest([this.tabbedItems$, this.activeTabName$])\n .pipe(tap(([_, activeTabName]) => this.selectTab(activeTabName)))\n .subscribe()\n }\n\n /**\n *\n */\n public onClickTab(event: any, tab: TheSeamTabbedItemComponent) {\n this.selectedTab = tab\n if (this.onlyRouteContent) {\n this._router.navigate([tab.name], { relativeTo: this._route })\n }\n this.tabChanged.emit(tab)\n }\n\n /**\n * TODO: Make more generic, so that the name isn't the only way\n * to select a tab\n */\n public selectTab(name?: string) {\n if (isNullOrUndefined(name) || name === this.selectedTab?.name) {\n return\n }\n\n const tab = this.tabbedItems?.find((t) => t.name === name)\n if (tab) {\n this.selectedTab = tab\n } else {\n // eslint-disable-next-line no-console\n console.warn(`Tab with name '${name}' not found`)\n }\n }\n}\n","<div [fxLayout]=\"direction === 'horizontal' ? 'column' : 'row'\" fxFlexFill>\n <!-- Tabs -->\n <div\n *ngIf=\"!hideTabs\"\n [fxLayout]=\"direction === 'horizontal' ? 'row' : 'column'\"\n style=\"position: relative\"\n >\n <ng-container *ngFor=\"let tabbedItem of tabbedItems$ | async\">\n <div\n class=\"tabbed-tab pt-2 pb-2 pl-4 pr-4 bg-light text-nowrap\"\n [class.tab-dir-horizontal]=\"direction === 'horizontal'\"\n [class.tab-dir-vertical]=\"direction === 'vertical'\"\n (click)=\"onClickTab($event, tabbedItem)\"\n [class.active]=\"tabbedItem === (selectedTab$ | async)\"\n >\n <ng-template\n *ngIf=\"tabbedItem.tabbedTabTpl; else tabLabelTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedTabTpl\"\n ></ng-template>\n <ng-template #tabLabelTpl>{{ tabbedItem?.label }}</ng-template>\n </div>\n </ng-container>\n </div>\n\n <!-- Tabs Content -->\n <div class=\"tabbed-tabs-content bg-light\">\n <ng-container *ngIf=\"onlyRouteContent; else notOnlyRouteContent\">\n <router-outlet></router-outlet>\n </ng-container>\n <ng-template #notOnlyRouteContent>\n <ng-container *ngIf=\"selectedTab$ | async as selectedTab\">\n <seam-tabbed-content\n fxFlexFill\n [tabbedItem]=\"selectedTab\"\n ></seam-tabbed-content>\n </ng-container>\n </ng-template>\n </div>\n</div>\n","import { NgModule } from '@angular/core'\n\nimport { TheSeamTabbedTabContentDirective } from './directives/tabbed-tab-content.directive'\nimport { TheSeamTabbedTabDirective } from './directives/tabbed-tab.directive'\nimport { TheSeamTabbedContentComponent } from './tabbed-content/tabbed-content.component'\nimport { TheSeamTabbedItemComponent } from './tabbed-item/tabbed-item.component'\nimport { TheSeamTabbedComponent } from './tabbed.component'\n\n@NgModule({\n imports: [\n TheSeamTabbedComponent,\n TheSeamTabbedTabContentDirective,\n TheSeamTabbedTabDirective,\n TheSeamTabbedItemComponent,\n TheSeamTabbedContentComponent,\n ],\n exports: [\n TheSeamTabbedComponent,\n TheSeamTabbedTabContentDirective,\n TheSeamTabbedTabDirective,\n TheSeamTabbedItemComponent,\n TheSeamTabbedContentComponent,\n ],\n})\nexport class TheSeamTabbedModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.TheSeamTabbedService","i1","i2"],"mappings":"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"}
1
+ {"version":3,"file":"theseam-ui-common-tabbed.mjs","sources":["../../../projects/ui-common/tabbed/directives/tabbed-tab-content.directive.ts","../../../projects/ui-common/tabbed/tabbed.service.ts","../../../projects/ui-common/tabbed/directives/tabbed-tab.directive.ts","../../../projects/ui-common/tabbed/tabbed-content/tabbed-content.component.ts","../../../projects/ui-common/tabbed/tabbed-content/tabbed-content.component.html","../../../projects/ui-common/tabbed/tabbed-item/tabbed-item.component.ts","../../../projects/ui-common/tabbed/tabbed-item/tabbed-item.component.html","../../../projects/ui-common/tabbed/tabbed.component.ts","../../../projects/ui-common/tabbed/tabbed.component.html","../../../projects/ui-common/tabbed/tabbed.module.ts","../../../projects/ui-common/tabbed/theseam-ui-common-tabbed.ts"],"sourcesContent":["import { Directive } from '@angular/core'\n\nimport { TheSeamTabbedTabContentAccessor } from '../tabbed-models'\n\n@Directive({\n selector: '[seamTabbedTabContent]',\n exportAs: 'seamTabbedTabContent',\n})\nexport class TheSeamTabbedTabContentDirective\n implements TheSeamTabbedTabContentAccessor\n{\n public isActive = false\n}\n","import { Injectable } from '@angular/core'\n\nimport { TheSeamTabbedComponent } from './tabbed.component'\n\nexport declare type TheSeamTabsDirection = 'horizontal' | 'vertical'\n\n@Injectable()\nexport class TheSeamTabbedService {\n private _tabGroups: { [groupName: string]: TheSeamTabbedComponent[] } = {}\n\n public registerTab(tab: TheSeamTabbedComponent, groupName: string) {\n if (!this._tabGroups[groupName]) {\n this._tabGroups[groupName] = []\n }\n\n for (const t of this._tabGroups[groupName]) {\n t.hideTabs = true\n }\n\n this._tabGroups[groupName].push(tab)\n }\n\n public unregisterTab(tab: TheSeamTabbedComponent, groupName: string) {\n if (this._tabGroups[groupName]) {\n this._tabGroups[groupName] = this._tabGroups[groupName].filter(\n (t) => t !== tab,\n )\n\n if (this._tabGroups[groupName].length > 0) {\n this._tabGroups[groupName][\n this._tabGroups[groupName].length - 1\n ].hideTabs = false\n }\n }\n }\n}\n","import { Directive, ElementRef, HostBinding, OnInit } from '@angular/core'\n\nimport { TheSeamTabbedTabAccessor } from '../tabbed-models'\nimport { TheSeamTabbedComponent } from '../tabbed.component'\nimport { TheSeamTabbedService } from '../tabbed.service'\n\n@Directive({\n selector: '[seamTabbedTab]',\n exportAs: 'seamTabbedTab',\n})\nexport class TheSeamTabbedTabDirective\n implements OnInit, TheSeamTabbedTabAccessor\n{\n // @HostBinding('class.custom-invalid')\n // get customInvalid() { return this.control.invalid }\n\n public isActive = false\n\n constructor(\n public elementRef: ElementRef,\n // public host: TheSeamTabbedComponent,\n public tabbedService: TheSeamTabbedService,\n ) {}\n\n ngOnInit() {\n // this.tabbedService.selectedTab.subscribe(tab => {\n // console.log('tab: ', tab)\n // console.log('tab.tabbedTabTpl.elementRef: ', tab.tabbedTabTpl.elementRef)\n // console.log('this.elementRef: ', this.elementRef)\n // if (tab.tabbedTabTpl.elementRef.na === this.elementRef) {\n // this.isActive = true\n // } else {\n // this.isActive = false\n // }\n // })\n }\n}\n","import { Component, Input } from '@angular/core'\nimport { NgIf, NgTemplateOutlet } from '@angular/common'\nimport { RouterModule } from '@angular/router'\n\nimport { TheSeamTabbedItemAccessor } from '../tabbed-models'\n\n@Component({\n selector: 'seam-tabbed-content',\n templateUrl: './tabbed-content.component.html',\n styleUrls: ['./tabbed-content.component.scss'],\n imports: [NgIf, NgTemplateOutlet, RouterModule],\n})\nexport class TheSeamTabbedContentComponent {\n @Input() tabbedItem?: TheSeamTabbedItemAccessor\n}\n","<div class=\"tabbed-content-root\">\n <ng-container *ngIf=\"tabbedItem\">\n <ng-template\n *ngIf=\"tabbedItem.tabbedContentTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedContentTpl\"\n ></ng-template>\n <ng-container *ngIf=\"tabbedItem.contentFromRoute\"\n ><router-outlet></router-outlet\n ></ng-container>\n </ng-container>\n</div>\n","import { BooleanInput } from '@angular/cdk/coercion'\nimport { Component, ContentChild, Input, TemplateRef } from '@angular/core'\n\nimport { InputBoolean } from '@theseam/ui-common/core'\n\nimport { TheSeamTabbedTabContentDirective } from '../directives/tabbed-tab-content.directive'\nimport { TheSeamTabbedTabDirective } from '../directives/tabbed-tab.directive'\nimport { TheSeamTabbedItemAccessor } from '../tabbed-models'\n\n@Component({\n selector: 'seam-tabbed-item',\n templateUrl: './tabbed-item.component.html',\n styleUrls: ['./tabbed-item.component.scss'],\n})\nexport class TheSeamTabbedItemComponent implements TheSeamTabbedItemAccessor {\n static ngAcceptInputType_contentFromRoute: BooleanInput\n\n @ContentChild(TheSeamTabbedTabDirective, { read: TemplateRef, static: true })\n public tabbedTabTpl?: TemplateRef<TheSeamTabbedTabDirective>\n\n @ContentChild(TheSeamTabbedTabContentDirective, {\n read: TemplateRef,\n static: true,\n })\n public tabbedContentTpl?: TemplateRef<TheSeamTabbedTabContentDirective>\n\n @Input() name: string | undefined | null\n @Input() label: string | undefined | null\n @Input() @InputBoolean() contentFromRoute = false\n}\n","","import {\n AfterContentInit,\n Component,\n ContentChildren,\n EventEmitter,\n Input,\n OnDestroy,\n OnInit,\n Output,\n QueryList,\n} from '@angular/core'\nimport { AsyncPipe, NgFor, NgIf } from '@angular/common'\nimport { ActivatedRoute, Router, RouterModule } from '@angular/router'\nimport { BehaviorSubject, combineLatest, shareReplay, tap } from 'rxjs'\n\nimport { isNullOrUndefined } from '@theseam/ui-common/utils'\n\nimport { TheSeamTabbedItemComponent } from './tabbed-item/tabbed-item.component'\nimport { TheSeamTabbedContentComponent } from './tabbed-content/tabbed-content.component'\nimport { TheSeamTabbedService, TheSeamTabsDirection } from './tabbed.service'\n\n@Component({\n selector: 'seam-tabbed',\n templateUrl: './tabbed.component.html',\n styleUrls: ['./tabbed.component.scss'],\n providers: [TheSeamTabbedService],\n imports: [\n NgIf,\n NgFor,\n AsyncPipe,\n RouterModule,\n TheSeamTabbedContentComponent,\n ],\n})\nexport class TheSeamTabbedComponent\n implements OnInit, AfterContentInit, OnDestroy\n{\n private _direction: TheSeamTabsDirection = 'vertical'\n private _hideTabs = false\n\n @ContentChildren(TheSeamTabbedItemComponent)\n set tabbedItems(val: QueryList<TheSeamTabbedItemComponent> | undefined) {\n this._tabbedItems.next(val)\n }\n get tabbedItems(): QueryList<TheSeamTabbedItemComponent> | undefined {\n return this._tabbedItems.value\n }\n private readonly _tabbedItems = new BehaviorSubject<\n QueryList<TheSeamTabbedItemComponent> | undefined\n >(undefined)\n public readonly tabbedItems$ = this._tabbedItems.asObservable()\n\n @Output() tabChanged = new EventEmitter<TheSeamTabbedItemComponent>()\n\n @Input()\n set direction(val: TheSeamTabsDirection) {\n this._direction = val\n }\n get direction() {\n return this._direction\n }\n\n @Input()\n set hideTabs(val: boolean) {\n setTimeout(() => {\n this._hideTabs = val\n })\n }\n get hideTabs(): boolean {\n return this._hideTabs\n }\n\n @Input()\n public onlyRouteContent = false\n\n get selectedTab(): TheSeamTabbedItemComponent | undefined {\n if (this.onlyRouteContent) {\n if (this._route.snapshot.children.length > 0) {\n const config = this._route.snapshot.children[0].routeConfig\n const childPath = config && config.path\n return this.tabbedItems?.find((t) => t.name === childPath)\n }\n } else {\n return this._selectedTab.value\n }\n }\n set selectedTab(tab: TheSeamTabbedItemComponent | undefined) {\n this._selectedTab.next(tab)\n }\n private readonly _selectedTab = new BehaviorSubject<\n TheSeamTabbedItemComponent | undefined\n >(undefined)\n public readonly selectedTab$ = this._selectedTab\n .asObservable()\n .pipe(shareReplay({ bufferSize: 1, refCount: true }))\n\n @Input()\n set activeTabName(val: string) {\n this._activeTabName.next(val)\n }\n private readonly _activeTabName = new BehaviorSubject<string | undefined>(\n undefined,\n )\n private readonly activeTabName$ = this._activeTabName.asObservable()\n\n constructor(\n private readonly _tabbedService: TheSeamTabbedService,\n private readonly _router: Router,\n private readonly _route: ActivatedRoute,\n ) {}\n\n ngOnInit() {\n this._tabbedService.registerTab(this, 'main')\n }\n\n ngOnDestroy() {\n this._tabbedService.unregisterTab(this, 'main')\n }\n\n ngAfterContentInit() {\n combineLatest([this.tabbedItems$, this.activeTabName$])\n .pipe(tap(([_, activeTabName]) => this.selectTab(activeTabName)))\n .subscribe()\n }\n\n /**\n *\n */\n public onClickTab(event: any, tab: TheSeamTabbedItemComponent) {\n this.selectedTab = tab\n if (this.onlyRouteContent) {\n this._router.navigate([tab.name], { relativeTo: this._route })\n }\n this.tabChanged.emit(tab)\n }\n\n /**\n * TODO: Make more generic, so that the name isn't the only way\n * to select a tab\n */\n public selectTab(name?: string) {\n if (isNullOrUndefined(name) || name === this.selectedTab?.name) {\n return\n }\n\n const tab = this.tabbedItems?.find((t) => t.name === name)\n if (tab) {\n this.selectedTab = tab\n } else {\n // eslint-disable-next-line no-console\n console.warn(`Tab with name '${name}' not found`)\n }\n }\n}\n","<div\n class=\"tabbed-root\"\n [style.flex-direction]=\"direction === 'horizontal' ? 'column' : 'row'\"\n>\n <!-- Tabs -->\n <div\n *ngIf=\"!hideTabs\"\n class=\"tabbed-tabs\"\n [style.flex-direction]=\"direction === 'horizontal' ? 'row' : 'column'\"\n >\n <ng-container *ngFor=\"let tabbedItem of tabbedItems$ | async\">\n <div\n class=\"tabbed-tab pt-2 pb-2 pl-4 pr-4 bg-light text-nowrap\"\n [class.tab-dir-horizontal]=\"direction === 'horizontal'\"\n [class.tab-dir-vertical]=\"direction === 'vertical'\"\n (click)=\"onClickTab($event, tabbedItem)\"\n [class.active]=\"tabbedItem === (selectedTab$ | async)\"\n >\n <ng-template\n *ngIf=\"tabbedItem.tabbedTabTpl; else tabLabelTpl\"\n [ngTemplateOutlet]=\"tabbedItem.tabbedTabTpl\"\n ></ng-template>\n <ng-template #tabLabelTpl>{{ tabbedItem?.label }}</ng-template>\n </div>\n </ng-container>\n </div>\n\n <!-- Tabs Content -->\n <div class=\"tabbed-tabs-content bg-light\">\n <ng-container *ngIf=\"onlyRouteContent; else notOnlyRouteContent\">\n <router-outlet></router-outlet>\n </ng-container>\n <ng-template #notOnlyRouteContent>\n <ng-container *ngIf=\"selectedTab$ | async as selectedTab\">\n <seam-tabbed-content\n class=\"tabbed-content-fill\"\n [tabbedItem]=\"selectedTab\"\n ></seam-tabbed-content>\n </ng-container>\n </ng-template>\n </div>\n</div>\n","import { NgModule } from '@angular/core'\n\nimport { TheSeamTabbedTabContentDirective } from './directives/tabbed-tab-content.directive'\nimport { TheSeamTabbedTabDirective } from './directives/tabbed-tab.directive'\nimport { TheSeamTabbedContentComponent } from './tabbed-content/tabbed-content.component'\nimport { TheSeamTabbedItemComponent } from './tabbed-item/tabbed-item.component'\nimport { TheSeamTabbedComponent } from './tabbed.component'\n\n@NgModule({\n imports: [\n TheSeamTabbedComponent,\n TheSeamTabbedTabContentDirective,\n TheSeamTabbedTabDirective,\n TheSeamTabbedItemComponent,\n TheSeamTabbedContentComponent,\n ],\n exports: [\n TheSeamTabbedComponent,\n TheSeamTabbedTabContentDirective,\n TheSeamTabbedTabDirective,\n TheSeamTabbedItemComponent,\n TheSeamTabbedContentComponent,\n ],\n})\nexport class TheSeamTabbedModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":["i1.TheSeamTabbedService","i1"],"mappings":";;;;;;;;;;MAQa,gCAAgC,CAAA;IAGpC,QAAQ,GAAG,KAAK;wGAHZ,gCAAgC,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAhC,gCAAgC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,wBAAA,EAAA,QAAA,EAAA,CAAA,sBAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAhC,gCAAgC,EAAA,UAAA,EAAA,CAAA;kBAJ5C,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,wBAAwB;AAClC,oBAAA,QAAQ,EAAE,sBAAsB;AACjC,iBAAA;;;MCAY,oBAAoB,CAAA;IACvB,UAAU,GAAsD,EAAE;IAEnE,WAAW,CAAC,GAA2B,EAAE,SAAiB,EAAA;QAC/D,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;AAC/B,YAAA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,EAAE;QACjC;QAEA,KAAK,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;AAC1C,YAAA,CAAC,CAAC,QAAQ,GAAG,IAAI;QACnB;QAEA,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC;IACtC;IAEO,aAAa,CAAC,GAA2B,EAAE,SAAiB,EAAA;AACjE,QAAA,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,EAAE;YAC9B,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,MAAM,CAC5D,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,CACjB;YAED,IAAI,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;gBACzC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CACxB,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,MAAM,GAAG,CAAC,CACtC,CAAC,QAAQ,GAAG,KAAK;YACpB;QACF;IACF;wGA3BW,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,UAAA,EAAA,CAAA;4GAApB,oBAAoB,EAAA,CAAA;;4FAApB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBADhC;;;MCIY,yBAAyB,CAAA;AAS3B,IAAA,UAAA;AAEA,IAAA,aAAA;;;IALF,QAAQ,GAAG,KAAK;AAEvB,IAAA,WAAA,CACS,UAAsB;;IAEtB,aAAmC,EAAA;QAFnC,IAAA,CAAA,UAAU,GAAV,UAAU;QAEV,IAAA,CAAA,aAAa,GAAb,aAAa;IACnB;IAEH,QAAQ,GAAA;;;;;;;;;;;IAWR;wGAzBW,yBAAyB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAA,EAAA,CAAA,UAAA,EAAA,EAAA,EAAA,KAAA,EAAAA,oBAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAAzB,yBAAyB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;4FAAzB,yBAAyB,EAAA,UAAA,EAAA,CAAA;kBAJrC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,iBAAiB;AAC3B,oBAAA,QAAQ,EAAE,eAAe;AAC1B,iBAAA;;;MCGY,6BAA6B,CAAA;AAC/B,IAAA,UAAU;wGADR,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAA7B,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,6BAA6B,qHCZ1C,6WAWA,EAAA,MAAA,EAAA,CAAA,8DAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDDY,IAAI,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,gBAAgB,mJAAE,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAAC,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FAEnC,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBANzC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,qBAAqB,WAGtB,CAAC,IAAI,EAAE,gBAAgB,EAAE,YAAY,CAAC,EAAA,QAAA,EAAA,6WAAA,EAAA,MAAA,EAAA,CAAA,8DAAA,CAAA,EAAA;;sBAG9C;;;MECU,0BAA0B,CAAA;IACrC,OAAO,kCAAkC;AAGlC,IAAA,YAAY;AAMZ,IAAA,gBAAgB;AAEd,IAAA,IAAI;AACJ,IAAA,KAAK;IACW,gBAAgB,GAAG,KAAK;wGAdtC,0BAA0B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAA1B,0BAA0B,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,MAAA,EAAA,KAAA,EAAA,OAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,cAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAGvB,yBAAyB,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EAAU,WAAW,8EAG9C,gCAAgC,EAAA,WAAA,EAAA,IAAA,EAAA,IAAA,EACtC,WAAW,EAAA,MAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrBrB,EAAA,EAAA,MAAA,EAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;AD4B2B,UAAA,CAAA;AAAf,IAAA,YAAY;AAA2B,CAAA,EAAA,0BAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,KAAA,CAAA,CAAA;4FAdtC,0BAA0B,EAAA,UAAA,EAAA,CAAA;kBALtC,SAAS;+BACE,kBAAkB,EAAA,QAAA,EAAA,EAAA,EAAA;;sBAO3B,YAAY;uBAAC,yBAAyB,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,IAAI,EAAE;;sBAG3E,YAAY;AAAC,gBAAA,IAAA,EAAA,CAAA,gCAAgC,EAAE;AAC9C,wBAAA,IAAI,EAAE,WAAW;AACjB,wBAAA,MAAM,EAAE,IAAI;AACb,qBAAA;;sBAGA;;sBACA;;sBACA;;;MEMU,sBAAsB,CAAA;AAwEd,IAAA,cAAA;AACA,IAAA,OAAA;AACA,IAAA,MAAA;IAvEX,UAAU,GAAyB,UAAU;IAC7C,SAAS,GAAG,KAAK;IAEzB,IACI,WAAW,CAAC,GAAsD,EAAA;AACpE,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;IAC7B;AACA,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK;IAChC;AACiB,IAAA,YAAY,GAAG,IAAI,eAAe,CAEjD,SAAS,CAAC;AACI,IAAA,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE;AAErD,IAAA,UAAU,GAAG,IAAI,YAAY,EAA8B;IAErE,IACI,SAAS,CAAC,GAAyB,EAAA;AACrC,QAAA,IAAI,CAAC,UAAU,GAAG,GAAG;IACvB;AACA,IAAA,IAAI,SAAS,GAAA;QACX,OAAO,IAAI,CAAC,UAAU;IACxB;IAEA,IACI,QAAQ,CAAC,GAAY,EAAA;QACvB,UAAU,CAAC,MAAK;AACd,YAAA,IAAI,CAAC,SAAS,GAAG,GAAG;AACtB,QAAA,CAAC,CAAC;IACJ;AACA,IAAA,IAAI,QAAQ,GAAA;QACV,OAAO,IAAI,CAAC,SAAS;IACvB;IAGO,gBAAgB,GAAG,KAAK;AAE/B,IAAA,IAAI,WAAW,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;AAC5C,gBAAA,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW;AAC3D,gBAAA,MAAM,SAAS,GAAG,MAAM,IAAI,MAAM,CAAC,IAAI;AACvC,gBAAA,OAAO,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;YAC5D;QACF;aAAO;AACL,YAAA,OAAO,IAAI,CAAC,YAAY,CAAC,KAAK;QAChC;IACF;IACA,IAAI,WAAW,CAAC,GAA2C,EAAA;AACzD,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC;IAC7B;AACiB,IAAA,YAAY,GAAG,IAAI,eAAe,CAEjD,SAAS,CAAC;IACI,YAAY,GAAG,IAAI,CAAC;AACjC,SAAA,YAAY;AACZ,SAAA,IAAI,CAAC,WAAW,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAEvD,IACI,aAAa,CAAC,GAAW,EAAA;AAC3B,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B;AACiB,IAAA,cAAc,GAAG,IAAI,eAAe,CACnD,SAAS,CACV;AACgB,IAAA,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,EAAE;AAEpE,IAAA,WAAA,CACmB,cAAoC,EACpC,OAAe,EACf,MAAsB,EAAA;QAFtB,IAAA,CAAA,cAAc,GAAd,cAAc;QACd,IAAA,CAAA,OAAO,GAAP,OAAO;QACP,IAAA,CAAA,MAAM,GAAN,MAAM;IACtB;IAEH,QAAQ,GAAA;QACN,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,IAAI,EAAE,MAAM,CAAC;IAC/C;IAEA,WAAW,GAAA;QACT,IAAI,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI,EAAE,MAAM,CAAC;IACjD;IAEA,kBAAkB,GAAA;QAChB,aAAa,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC;AACnD,aAAA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;AAC/D,aAAA,SAAS,EAAE;IAChB;AAEA;;AAEG;IACI,UAAU,CAAC,KAAU,EAAE,GAA+B,EAAA;AAC3D,QAAA,IAAI,CAAC,WAAW,GAAG,GAAG;AACtB,QAAA,IAAI,IAAI,CAAC,gBAAgB,EAAE;AACzB,YAAA,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;QAChE;AACA,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC;IAC3B;AAEA;;;AAGG;AACI,IAAA,SAAS,CAAC,IAAa,EAAA;AAC5B,QAAA,IAAI,iBAAiB,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE;YAC9D;QACF;AAEA,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC;QAC1D,IAAI,GAAG,EAAE;AACP,YAAA,IAAI,CAAC,WAAW,GAAG,GAAG;QACxB;aAAO;;AAEL,YAAA,OAAO,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAA,WAAA,CAAa,CAAC;QACnD;IACF;wGAtHW,sBAAsB,EAAA,IAAA,EAAA,CAAA,EAAA,KAAA,EAAAD,oBAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,MAAA,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAtB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,sBAAsB,iOATtB,CAAC,oBAAoB,CAAC,EAAA,OAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,SAAA,EAehB,0BAA0B,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECxC7C,i9CA0CA,EAAA,MAAA,EAAA,CAAA,8tCAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDfI,IAAI,6FACJ,KAAK,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,cAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EAEL,YAAY,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,YAAA,EAAA,QAAA,EAAA,eAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,kBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,QAAA,CAAA,EAAA,QAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,6BAA6B,mFAF7B,SAAS,EAAA,IAAA,EAAA,OAAA,EAAA,CAAA,EAAA,CAAA;;4FAKA,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAblC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,aAAa,EAAA,SAAA,EAGZ,CAAC,oBAAoB,CAAC,EAAA,OAAA,EACxB;wBACP,IAAI;wBACJ,KAAK;wBACL,SAAS;wBACT,YAAY;wBACZ,6BAA6B;AAC9B,qBAAA,EAAA,QAAA,EAAA,i9CAAA,EAAA,MAAA,EAAA,CAAA,8tCAAA,CAAA,EAAA;;sBAQA,eAAe;uBAAC,0BAA0B;;sBAY1C;;sBAEA;;sBAQA;;sBAUA;;sBAwBA;;;MExEU,mBAAmB,CAAA;wGAAnB,mBAAmB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAnB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAd5B,sBAAsB;YACtB,gCAAgC;YAChC,yBAAyB;YACzB,0BAA0B;AAC1B,YAAA,6BAA6B,aAG7B,sBAAsB;YACtB,gCAAgC;YAChC,yBAAyB;YACzB,0BAA0B;YAC1B,6BAA6B,CAAA,EAAA,CAAA;AAGpB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,mBAAmB,YAd5B,sBAAsB;YAItB,6BAA6B,CAAA,EAAA,CAAA;;4FAUpB,mBAAmB,EAAA,UAAA,EAAA,CAAA;kBAhB/B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,OAAO,EAAE;wBACP,sBAAsB;wBACtB,gCAAgC;wBAChC,yBAAyB;wBACzB,0BAA0B;wBAC1B,6BAA6B;AAC9B,qBAAA;AACD,oBAAA,OAAO,EAAE;wBACP,sBAAsB;wBACtB,gCAAgC;wBAChC,yBAAyB;wBACzB,0BAA0B;wBAC1B,6BAA6B;AAC9B,qBAAA;AACF,iBAAA;;;ACvBD;;AAEG;;;;"}
@@ -4,3 +4,31 @@ seam-top-bar-title {
4
4
  flex-direction: row;
5
5
  align-items: center;
6
6
  }
7
+
8
+ .top-bar-title__heading {
9
+ font-size: 32px;
10
+ }
11
+
12
+ // fxHide.gt-sm: hidden when screen > 960px
13
+ .top-bar-title__break {
14
+ display: none;
15
+
16
+ @media screen and (max-width: 959px) {
17
+ display: block;
18
+ }
19
+ }
20
+
21
+ // ngStyle.lt-md: font-size 26px when screen <= 959px
22
+ @media screen and (max-width: 959px) {
23
+ .top-bar-title__heading {
24
+ font-size: 26px;
25
+ }
26
+ }
27
+
28
+ // ngStyle.lt-sm: font-size 20px, line-height 1 when screen <= 599px
29
+ @media screen and (max-width: 599px) {
30
+ .top-bar-title__heading {
31
+ font-size: 20px;
32
+ line-height: 1;
33
+ }
34
+ }
package/layout/index.d.ts CHANGED
@@ -1,8 +1,5 @@
1
- import * as i0 from '@angular/core';
2
- import * as i1 from '@angular/common';
3
- import * as i2 from '@angular/flex-layout';
4
- import { MediaObserver } from '@angular/flex-layout';
5
1
  import { Observable } from 'rxjs';
2
+ import * as i0 from '@angular/core';
6
3
 
7
4
  /**
8
5
  * | breakpoint | mediaQuery |
@@ -25,14 +22,7 @@ import { Observable } from 'rxjs';
25
22
  */
26
23
  type MediaQueryAliases = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'lt-sm' | 'lt-md' | 'lt-lg' | 'lt-xl' | 'gt-xs' | 'gt-sm' | 'gt-md' | 'gt-lg';
27
24
 
28
- declare class TheSeamLayoutModule {
29
- static ɵfac: i0.ɵɵFactoryDeclaration<TheSeamLayoutModule, never>;
30
- static ɵmod: i0.ɵɵNgModuleDeclaration<TheSeamLayoutModule, never, [typeof i1.CommonModule, typeof i2.FlexLayoutModule], [typeof i2.FlexLayoutModule]>;
31
- static ɵinj: i0.ɵɵInjectorDeclaration<TheSeamLayoutModule>;
32
- }
33
-
34
25
  declare class TheSeamLayoutService {
35
- private _media;
36
26
  /**
37
27
  * Observes if app is a mobile-like size.
38
28
  * Default mobile breakpoint is <= 599px,
@@ -41,7 +31,7 @@ declare class TheSeamLayoutService {
41
31
  isMobile$: Observable<boolean>;
42
32
  private _mobileBreakpoint;
43
33
  mobileBreakpoint$: Observable<MediaQueryAliases>;
44
- constructor(_media: MediaObserver);
34
+ constructor();
45
35
  observe(alias: MediaQueryAliases): Observable<boolean>;
46
36
  /**
47
37
  * Update breakpoint observed by isMobile$
@@ -52,10 +42,10 @@ declare class TheSeamLayoutService {
52
42
  }
53
43
 
54
44
  /**
55
- * Observable helper for observing a single breakpoint alias with
56
- * `@angular/flex-layout` MediaObserver.
45
+ * Observable helper for observing a single breakpoint alias using native
46
+ * `window.matchMedia`.
57
47
  */
58
- declare function observeMediaQuery(mediaObserver: MediaObserver, alias: MediaQueryAliases): Observable<boolean>;
48
+ declare function observeMediaQuery(alias: MediaQueryAliases): Observable<boolean>;
59
49
 
60
- export { TheSeamLayoutModule, TheSeamLayoutService, observeMediaQuery };
50
+ export { TheSeamLayoutService, observeMediaQuery };
61
51
  export type { MediaQueryAliases };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@theseam/ui-common",
3
- "version": "1.0.2-beta.45",
3
+ "version": "1.0.2-beta.48",
4
4
  "peerDependencies": {
5
5
  "@angular/cdk": "^20.2.3",
6
6
  "@angular/common": "^20.3.0",
@@ -8,7 +8,6 @@
8
8
  "@angular/forms": "^20.3.0",
9
9
  "@angular/animations": "^20.3.0",
10
10
  "@angular/router": "^20.3.0",
11
- "@angular/flex-layout": "^15.0.0-beta.42",
12
11
  "rxjs": "~7.8.0",
13
12
  "@fortawesome/angular-fontawesome": "^0.13.0",
14
13
  "@fortawesome/fontawesome-svg-core": "^1.2.35",