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

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

@@ -1,10 +1,7 @@
-import { CommonModule } from '@angular/common';
 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 { BehaviorSubject } from 'rxjs';
-import { map, startWith, distinctUntilChanged, shareReplay, switchMap } from 'rxjs/operators';
+import { Injectable } from '@angular/core';
+import { Observable, BehaviorSubject } from 'rxjs';
+import { distinctUntilChanged, shareReplay, switchMap } from 'rxjs/operators';
 
 // TODO: Make sure the `@angular/flex-layout` breakpoints and bootstrap
 // breakpoints work the same.
@@ -16,20 +13,6 @@ import { map, startWith, distinctUntilChanged, shareReplay, switchMap } from 'rx
 // Another option is to create new aliases to blend a mix between them, if it
 // doesn't add to much complexity.
 
-class TheSeamLayoutModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, imports: [CommonModule, FlexLayoutModule], exports: [FlexLayoutModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, imports: [CommonModule, FlexLayoutModule, FlexLayoutModule] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [],
-                    imports: [CommonModule, FlexLayoutModule],
-                    exports: [FlexLayoutModule],
-                }]
-        }] });
-
 const mediaQueriesMap = {
     xs: 'screen and (max-width: 599px)',
     sm: 'screen and (min-width: 600px) and (max-width: 959px)',
@@ -46,31 +29,23 @@ const mediaQueriesMap = {
     'gt-lg': 'screen and (min-width: 1920px)',
 };
 /**
- * TODO: Find out if the MediaObserver can return an immediate result on load
- * accurately like the native matchMedia. If not switch to another that can or
- * just implement it myself. I would rather use a well tested library for
- * something like that, since it could have a lot of affect on performance.
- */
-function isMediaQueryActive(query, fallback) {
-    if (window && window.matchMedia) {
-        const x = window.matchMedia(mediaQueriesMap[query]);
-        return x.matches;
-    }
-    return fallback.isActive(query);
-}
-/**
- * Observable helper for observing a single breakpoint alias with
- * `@angular/flex-layout` MediaObserver.
+ * Observable helper for observing a single breakpoint alias using native
+ * `window.matchMedia`.
  */
-function observeMediaQuery(mediaObserver, alias) {
-    // console.log(alias, mediaObserver.isActive(alias), isMediaQueryActive(alias, mediaObserver))
-    return mediaObserver.asObservable().pipe(map((_) => mediaObserver.isActive(alias)), 
-    // startWith(mediaObserver.isActive(alias)),
-    startWith(isMediaQueryActive(alias, mediaObserver)), distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
+function observeMediaQuery(alias) {
+    const query = mediaQueriesMap[alias];
+    return new Observable((subscriber) => {
+        const mql = window.matchMedia(query);
+        subscriber.next(mql.matches);
+        const handler = (event) => {
+            subscriber.next(event.matches);
+        };
+        mql.addEventListener('change', handler);
+        return () => mql.removeEventListener('change', handler);
+    }).pipe(distinctUntilChanged(), shareReplay({ refCount: true, bufferSize: 1 }));
 }
 
 class TheSeamLayoutService {
-    _media;
     /**
      * Observes if app is a mobile-like size.
      * Default mobile breakpoint is <= 599px,
@@ -79,12 +54,11 @@ class TheSeamLayoutService {
     isMobile$;
     _mobileBreakpoint = new BehaviorSubject('lt-sm');
     mobileBreakpoint$ = this._mobileBreakpoint.asObservable();
-    constructor(_media) {
-        this._media = _media;
+    constructor() {
         this.isMobile$ = this.mobileBreakpoint$.pipe(switchMap((breakpoint) => this.observe(breakpoint)), shareReplay({ bufferSize: 1, refCount: true }));
     }
     observe(alias) {
-        return observeMediaQuery(this._media, alias);
+        return observeMediaQuery(alias);
     }
     /**
      * Update breakpoint observed by isMobile$
@@ -92,7 +66,7 @@ class TheSeamLayoutService {
     setMobileBreakpoint(alias) {
         this._mobileBreakpoint.next(alias);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutService, deps: [{ token: i1.MediaObserver }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamLayoutService, providedIn: 'root' });
 }
 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
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.MediaObserver }] });
+        }], ctorParameters: () => [] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { TheSeamLayoutModule, TheSeamLayoutService, observeMediaQuery };
+export { TheSeamLayoutService, observeMediaQuery };
 //# sourceMappingURL=theseam-ui-common-layout.mjs.map

package/fesm2022/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: [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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"}
+{"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;;;;"}

package/fesm2022/theseam-ui-common-progress.mjs

@@ -1,9 +1,44 @@
+import { ComponentHarness } from '@angular/cdk/testing';
 import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Input, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { Input, ViewEncapsulation, Component, inject, DestroyRef, input, signal, computed, effect, ChangeDetectionStrategy, booleanAttribute, output, NgModule } from '@angular/core';
 import { InputBoolean, InputNumber } from '@theseam/ui-common/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { TheSeamTooltipDirective } from '@theseam/ui-common/tooltip';
+
+/** Harness for a single cell inside `TheSeamSegmentedProgressBarComponent`. */
+class TheSeamSegmentedProgressBarCellHarness extends ComponentHarness {
+    static hostSelector = 'seam-segmented-progress-bar-cell';
+    /** The visual state of the cell, derived from its host classes. */
+    async getState() {
+        const host = await this.host();
+        if (await host.hasClass('bg-success')) {
+            return 'complete';
+        }
+        return 'default';
+    }
+    async click() {
+        return (await this.host()).click();
+    }
+}
+/** Harness for `TheSeamSegmentedProgressBarComponent`. */
+class TheSeamSegmentedProgressBarHarness extends ComponentHarness {
+    static hostSelector = 'seam-segmented-progress-bar';
+    _cells = this.locatorForAll(TheSeamSegmentedProgressBarCellHarness);
+    /** Gets harnesses for every rendered cell, in order. */
+    async getCells() {
+        return this._cells();
+    }
+    /** Clicks the cell at the given zero-based index. */
+    async clickCell(index) {
+        const cells = await this.getCells();
+        if (index < 0 || index >= cells.length) {
+            throw new Error(`TheSeamSegmentedProgressBarHarness.clickCell: index ${index} out of range (0..${cells.length - 1})`);
+        }
+        await cells[index].click();
+    }
+}
 
 function calcDashoffset(value, circumference) {
     const progress = value / 100;
@@ -71,17 +106,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                 type: Input
             }] } });
 
+class SegmentedProgressBarCellComponent {
+    _destroyRef = inject(DestroyRef);
+    step = input.required(...(ngDevMode ? [{ debugName: "step" }] : []));
+    _controlStatus = signal(null, ...(ngDevMode ? [{ debugName: "_controlStatus" }] : []));
+    _state = computed(() => {
+        const s = this.step();
+        if (s.completed !== undefined) {
+            return s.completed ? 'COMPLETE' : 'DEFAULT';
+        }
+        if (s.control) {
+            const status = this._controlStatus();
+            if (status === 'VALID' && (s.isCurrent || s.hasVisited)) {
+                return 'COMPLETE';
+            }
+            return 'DEFAULT';
+        }
+        return 'DEFAULT';
+    }, ...(ngDevMode ? [{ debugName: "_state" }] : []));
+    constructor() {
+        let sub;
+        effect(() => {
+            const s = this.step();
+            sub?.unsubscribe();
+            sub = undefined;
+            if (s.control) {
+                this._controlStatus.set(s.control.status);
+                sub = s.control.statusChanges.subscribe((status) => this._controlStatus.set(status));
+            }
+            else {
+                this._controlStatus.set(null);
+            }
+        });
+        this._destroyRef.onDestroy(() => sub?.unsubscribe());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SegmentedProgressBarCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: SegmentedProgressBarCellComponent, isStandalone: true, selector: "seam-segmented-progress-bar-cell", inputs: { step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.bg-light": "_state() === \"DEFAULT\"", "class.bg-success": "_state() === \"COMPLETE\"" } }, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: SegmentedProgressBarCellComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'seam-segmented-progress-bar-cell',
+                    template: '',
+                    host: {
+                        '[class.bg-light]': '_state() === "DEFAULT"',
+                        '[class.bg-success]': '_state() === "COMPLETE"',
+                    },
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: true }] }] } });
+
+class TheSeamSegmentedProgressBarComponent {
+    progressSteps = input([], ...(ngDevMode ? [{ debugName: "progressSteps" }] : []));
+    clickable = input(false, ...(ngDevMode ? [{ debugName: "clickable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    enableTooltip = input(false, ...(ngDevMode ? [{ debugName: "enableTooltip", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+    cellClicked = output();
+    onClickProgressCell(step) {
+        if (!this.clickable()) {
+            return;
+        }
+        this.cellClicked.emit(step);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSegmentedProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TheSeamSegmentedProgressBarComponent, isStandalone: true, selector: "seam-segmented-progress-bar", inputs: { progressSteps: { classPropertyName: "progressSteps", publicName: "progressSteps", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null }, enableTooltip: { classPropertyName: "enableTooltip", publicName: "enableTooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cellClicked: "cellClicked" }, ngImport: i0, template: "<div class=\"progress-bar--container\">\n  @for (step of progressSteps(); track step.value) {\n    <seam-segmented-progress-bar-cell\n      [step]=\"step\"\n      class=\"progress-bar--cell border\"\n      [class.is-clickable]=\"clickable()\"\n      (click)=\"onClickProgressCell(step)\"\n      [seamTooltip]=\"step.label\"\n      placement=\"bottom\"\n      container=\"body\"\n      [disableTooltip]=\"!enableTooltip()\"\n    />\n  }\n</div>\n", styles: [".progress-bar--container{display:flex;flex-direction:row;flex-wrap:wrap}.progress-bar--container .progress-bar--cell{width:25px;height:20px;border-radius:3px}.progress-bar--container .progress-bar--cell.is-clickable:hover:not(:disabled){cursor:pointer}\n"], dependencies: [{ kind: "component", type: SegmentedProgressBarCellComponent, selector: "seam-segmented-progress-bar-cell", inputs: ["step"] }, { kind: "directive", type: TheSeamTooltipDirective, selector: "[seamTooltip]", inputs: ["seamTooltip", "tooltipClass", "placement", "container", "disableTooltip", "showDelay", "hideDelay", "trigger"], exportAs: ["seamTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamSegmentedProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'seam-segmented-progress-bar', imports: [SegmentedProgressBarCellComponent, TheSeamTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"progress-bar--container\">\n  @for (step of progressSteps(); track step.value) {\n    <seam-segmented-progress-bar-cell\n      [step]=\"step\"\n      class=\"progress-bar--cell border\"\n      [class.is-clickable]=\"clickable()\"\n      (click)=\"onClickProgressCell(step)\"\n      [seamTooltip]=\"step.label\"\n      placement=\"bottom\"\n      container=\"body\"\n      [disableTooltip]=\"!enableTooltip()\"\n    />\n  }\n</div>\n", styles: [".progress-bar--container{display:flex;flex-direction:row;flex-wrap:wrap}.progress-bar--container .progress-bar--cell{width:25px;height:20px;border-radius:3px}.progress-bar--container .progress-bar--cell.is-clickable:hover:not(:disabled){cursor:pointer}\n"] }]
+        }], propDecorators: { progressSteps: [{ type: i0.Input, args: [{ isSignal: true, alias: "progressSteps", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], enableTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableTooltip", required: false }] }], cellClicked: [{ type: i0.Output, args: ["cellClicked"] }] } });
+
 class TheSeamProgressModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamProgressModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TheSeamProgressModule, declarations: [ProgressCircleComponent], imports: [CommonModule], exports: [ProgressCircleComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: TheSeamProgressModule, declarations: [ProgressCircleComponent], imports: [CommonModule, TheSeamSegmentedProgressBarComponent], exports: [ProgressCircleComponent, TheSeamSegmentedProgressBarComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamProgressModule, imports: [CommonModule] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamProgressModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProgressCircleComponent],
-                    imports: [CommonModule],
-                    exports: [ProgressCircleComponent],
+                    imports: [CommonModule, TheSeamSegmentedProgressBarComponent],
+                    exports: [ProgressCircleComponent, TheSeamSegmentedProgressBarComponent],
                 }]
         }] });
 
@@ -89,5 +193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ProgressCircleComponent, TheSeamProgressModule, calcDashoffset };
+export { ProgressCircleComponent, TheSeamProgressModule, TheSeamSegmentedProgressBarCellHarness, TheSeamSegmentedProgressBarComponent, TheSeamSegmentedProgressBarHarness, calcDashoffset };
 //# sourceMappingURL=theseam-ui-common-progress.mjs.map

package/fesm2022/theseam-ui-common-progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"theseam-ui-common-progress.mjs","sources":["../../../projects/ui-common/progress/progress-circle/progress-circle.component.ts","../../../projects/ui-common/progress/progress-circle/progress-circle.component.html","../../../projects/ui-common/progress/progress.module.ts","../../../projects/ui-common/progress/theseam-ui-common-progress.ts"],"sourcesContent":["import { BooleanInput, NumberInput } from '@angular/cdk/coercion'\nimport { Component, Input, ViewEncapsulation } from '@angular/core'\n\nimport { InputBoolean, InputNumber } from '@theseam/ui-common/core'\n\ninterface IProgressInfo {\n  dashoffset: number\n  circumference: number\n  percent: number\n}\n\nexport function calcDashoffset(value: number, circumference: number) {\n  const progress = value / 100\n  const dashoffset = circumference * (1 - progress)\n  return dashoffset\n}\n\n@Component({\n  selector: 'seam-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class ProgressCircleComponent {\n  static ngAcceptInputType_fillBackground: BooleanInput\n  static ngAcceptInputType_showText: BooleanInput\n  static ngAcceptInputType_hiddenOnEmpty: BooleanInput\n  static ngAcceptInputType_percentage: NumberInput\n  static ngAcceptInputType_pending: BooleanInput\n\n  private _percentage = 0\n\n  @Input() @InputBoolean() fillBackground = false\n  @Input() @InputBoolean() showText = false\n  @Input() @InputBoolean() hiddenOnEmpty = true\n  @Input() @InputBoolean() pending = false\n\n  @Input()\n  @InputNumber()\n  set percentage(value: number) {\n    this._percentage = value\n    this._progressInfo = this._getProgress()\n  }\n  get percentage(): number {\n    return this._percentage\n  }\n\n  public readonly radius = 15\n  public readonly circumference = 2 * Math.PI * this.radius\n\n  _progressInfo?: IProgressInfo | null\n\n  private _getProgress(): IProgressInfo {\n    return {\n      dashoffset: calcDashoffset(this.percentage || 0, this.circumference),\n      circumference: this.circumference,\n      percent: Math.floor(this.percentage || 0),\n    }\n  }\n}\n","<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { ProgressCircleComponent } from './progress-circle/progress-circle.component'\n\n@NgModule({\n  declarations: [ProgressCircleComponent],\n  imports: [CommonModule],\n  exports: [ProgressCircleComponent],\n})\nexport class TheSeamProgressModule {}\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-progress.mjs","sources":["../../../projects/ui-common/progress/testing/segmented-progress-bar.harness.ts","../../../projects/ui-common/progress/progress-circle/progress-circle.component.ts","../../../projects/ui-common/progress/progress-circle/progress-circle.component.html","../../../projects/ui-common/progress/segmented-progress-bar/segmented-progress-bar-cell.component.ts","../../../projects/ui-common/progress/segmented-progress-bar/segmented-progress-bar.component.ts","../../../projects/ui-common/progress/segmented-progress-bar/segmented-progress-bar.component.html","../../../projects/ui-common/progress/progress.module.ts","../../../projects/ui-common/progress/theseam-ui-common-progress.ts"],"sourcesContent":["import { ComponentHarness } from '@angular/cdk/testing'\n\n/** Harness for a single cell inside `TheSeamSegmentedProgressBarComponent`. */\nexport class TheSeamSegmentedProgressBarCellHarness extends ComponentHarness {\n  static hostSelector = 'seam-segmented-progress-bar-cell'\n\n  /** The visual state of the cell, derived from its host classes. */\n  async getState(): Promise<'default' | 'complete'> {\n    const host = await this.host()\n    if (await host.hasClass('bg-success')) {\n      return 'complete'\n    }\n    return 'default'\n  }\n\n  async click(): Promise<void> {\n    return (await this.host()).click()\n  }\n}\n\n/** Harness for `TheSeamSegmentedProgressBarComponent`. */\nexport class TheSeamSegmentedProgressBarHarness extends ComponentHarness {\n  static hostSelector = 'seam-segmented-progress-bar'\n\n  private readonly _cells = this.locatorForAll(\n    TheSeamSegmentedProgressBarCellHarness,\n  )\n\n  /** Gets harnesses for every rendered cell, in order. */\n  async getCells(): Promise<TheSeamSegmentedProgressBarCellHarness[]> {\n    return this._cells()\n  }\n\n  /** Clicks the cell at the given zero-based index. */\n  async clickCell(index: number): Promise<void> {\n    const cells = await this.getCells()\n    if (index < 0 || index >= cells.length) {\n      throw new Error(\n        `TheSeamSegmentedProgressBarHarness.clickCell: index ${index} out of range (0..${cells.length - 1})`,\n      )\n    }\n    await cells[index].click()\n  }\n}\n","import { BooleanInput, NumberInput } from '@angular/cdk/coercion'\nimport { Component, Input, ViewEncapsulation } from '@angular/core'\n\nimport { InputBoolean, InputNumber } from '@theseam/ui-common/core'\n\ninterface IProgressInfo {\n  dashoffset: number\n  circumference: number\n  percent: number\n}\n\nexport function calcDashoffset(value: number, circumference: number) {\n  const progress = value / 100\n  const dashoffset = circumference * (1 - progress)\n  return dashoffset\n}\n\n@Component({\n  selector: 'seam-progress-circle',\n  templateUrl: './progress-circle.component.html',\n  styleUrls: ['./progress-circle.component.scss'],\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class ProgressCircleComponent {\n  static ngAcceptInputType_fillBackground: BooleanInput\n  static ngAcceptInputType_showText: BooleanInput\n  static ngAcceptInputType_hiddenOnEmpty: BooleanInput\n  static ngAcceptInputType_percentage: NumberInput\n  static ngAcceptInputType_pending: BooleanInput\n\n  private _percentage = 0\n\n  @Input() @InputBoolean() fillBackground = false\n  @Input() @InputBoolean() showText = false\n  @Input() @InputBoolean() hiddenOnEmpty = true\n  @Input() @InputBoolean() pending = false\n\n  @Input()\n  @InputNumber()\n  set percentage(value: number) {\n    this._percentage = value\n    this._progressInfo = this._getProgress()\n  }\n  get percentage(): number {\n    return this._percentage\n  }\n\n  public readonly radius = 15\n  public readonly circumference = 2 * Math.PI * this.radius\n\n  _progressInfo?: IProgressInfo | null\n\n  private _getProgress(): IProgressInfo {\n    return {\n      dashoffset: calcDashoffset(this.percentage || 0, this.circumference),\n      circumference: this.circumference,\n      percent: Math.floor(this.percentage || 0),\n    }\n  }\n}\n","<div\n  class=\"seam-progress-circle\"\n  *ngIf=\"_progressInfo as p\"\n  [class.seam-progress-circle--in-complete]=\"p.percent < 100\"\n  [class.seam-progress-circle--fill-bg]=\"fillBackground\"\n>\n  <div class=\"seam-progress-circle-inner\">\n    <ng-container *ngIf=\"p.percent > 0 || !hiddenOnEmpty\">\n      <svg\n        class=\"seam-progress-circle--icon-spinner\"\n        viewBox=\"0 0 40 40\"\n        [attr.data-percent]=\"p.percent\"\n      >\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path seam-progress-circle--icon-spinner-path-bg\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          stroke-width=\"4\"\n        ></circle>\n        <circle\n          class=\"seam-progress-circle--icon-spinner-path\"\n          cx=\"20\"\n          cy=\"20\"\n          r=\"15\"\n          fill=\"none\"\n          transform=\"rotate(-90, 20, 20)\"\n          stroke-width=\"4\"\n          stroke-miterlimit=\"10\"\n          [attr.stroke-dashoffset]=\"p.dashoffset\"\n          [style.stroke-dasharray]=\"p.circumference\"\n        ></circle>\n        <!-- Checkmark -->\n        <path\n          *ngIf=\"!pending && p.percent === 100\"\n          class=\"seam-progress-circle--icon-spinner-path\"\n          fill=\"none\"\n          stroke-width=\"4\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          d=\"M 11,22 L 18,28 L 28.5,17\"\n        ></path>\n        <!-- Hourglass -->\n        <!-- `p.percent === 101` is still here for backwards compatability, but planing to be removed. -->\n        <path\n          *ngIf=\"pending || p.percent === 101\"\n          class=\"seam-progress-circle--icon-hourglass\"\n          fill=\"none\"\n          d=\"M27.3,25.8c-0.2-2.5-1.6-4.6-3.6-5.8c2-1.2,3.4-3.3,3.6-5.8c0.7-0.3,1.2-1,1.2-1.8c0-1.1-0.9-2-2-2h-13\n          c-1.1,0-2,0.9-2,2c0,0.8,0.5,1.6,1.2,1.8c0.2,2.5,1.6,4.6,3.6,5.8c-2,1.2-3.4,3.3-3.6,5.8c-0.7,0.3-1.2,1-1.2,1.8c0,1.1,0.9,2,2,2\n          h13c1.1,0,2-0.9,2-2C28.6,26.9,28,26.1,27.3,25.8z M24.3,25.7h-8.5c0.3-2.1,2.1-3.6,4.2-3.6S24,23.6,24.3,25.7z M20,18\n          c-2.1,0-3.9-1.6-4.2-3.6h8.5C24,16.5,22.2,18,20,18z\"\n        ></path>\n      </svg>\n    </ng-container>\n    <div\n      class=\"seam-progress-circle--icon-text\"\n      *ngIf=\"showText && !pending && p.percent > 0 && p.percent < 100\"\n    >\n      <span>{{ p.percent }}</span>\n    </div>\n  </div>\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  computed,\n  effect,\n  inject,\n  input,\n  signal,\n} from '@angular/core'\nimport { FormControlStatus } from '@angular/forms'\nimport { Subscription } from 'rxjs'\n\nimport { TheSeamSegmentedProgressBarStep } from './segmented-progress-bar.models'\n\ntype CellState = 'DEFAULT' | 'COMPLETE'\n\n@Component({\n  selector: 'seam-segmented-progress-bar-cell',\n  template: '',\n  host: {\n    '[class.bg-light]': '_state() === \"DEFAULT\"',\n    '[class.bg-success]': '_state() === \"COMPLETE\"',\n  },\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SegmentedProgressBarCellComponent {\n  private readonly _destroyRef = inject(DestroyRef)\n\n  readonly step = input.required<TheSeamSegmentedProgressBarStep>()\n\n  private readonly _controlStatus = signal<FormControlStatus | null>(null)\n\n  protected readonly _state = computed<CellState>(() => {\n    const s = this.step()\n    if (s.completed !== undefined) {\n      return s.completed ? 'COMPLETE' : 'DEFAULT'\n    }\n    if (s.control) {\n      const status = this._controlStatus()\n      if (status === 'VALID' && (s.isCurrent || s.hasVisited)) {\n        return 'COMPLETE'\n      }\n      return 'DEFAULT'\n    }\n    return 'DEFAULT'\n  })\n\n  constructor() {\n    let sub: Subscription | undefined\n    effect(() => {\n      const s = this.step()\n      sub?.unsubscribe()\n      sub = undefined\n      if (s.control) {\n        this._controlStatus.set(s.control.status)\n        sub = s.control.statusChanges.subscribe((status) =>\n          this._controlStatus.set(status),\n        )\n      } else {\n        this._controlStatus.set(null)\n      }\n    })\n    this._destroyRef.onDestroy(() => sub?.unsubscribe())\n  }\n}\n","import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n} from '@angular/core'\n\nimport { TheSeamTooltipDirective } from '@theseam/ui-common/tooltip'\n\nimport { SegmentedProgressBarCellComponent } from './segmented-progress-bar-cell.component'\nimport { TheSeamSegmentedProgressBarStep } from './segmented-progress-bar.models'\n\n@Component({\n  selector: 'seam-segmented-progress-bar',\n  templateUrl: './segmented-progress-bar.component.html',\n  styleUrls: ['./segmented-progress-bar.component.scss'],\n  imports: [SegmentedProgressBarCellComponent, TheSeamTooltipDirective],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class TheSeamSegmentedProgressBarComponent {\n  readonly progressSteps = input<TheSeamSegmentedProgressBarStep[]>([])\n  readonly clickable = input(false, { transform: booleanAttribute })\n  readonly enableTooltip = input(false, { transform: booleanAttribute })\n\n  readonly cellClicked = output<TheSeamSegmentedProgressBarStep>()\n\n  onClickProgressCell(step: TheSeamSegmentedProgressBarStep): void {\n    if (!this.clickable()) {\n      return\n    }\n    this.cellClicked.emit(step)\n  }\n}\n","<div class=\"progress-bar--container\">\n  @for (step of progressSteps(); track step.value) {\n    <seam-segmented-progress-bar-cell\n      [step]=\"step\"\n      class=\"progress-bar--cell border\"\n      [class.is-clickable]=\"clickable()\"\n      (click)=\"onClickProgressCell(step)\"\n      [seamTooltip]=\"step.label\"\n      placement=\"bottom\"\n      container=\"body\"\n      [disableTooltip]=\"!enableTooltip()\"\n    />\n  }\n</div>\n","import { CommonModule } from '@angular/common'\nimport { NgModule } from '@angular/core'\n\nimport { ProgressCircleComponent } from './progress-circle/progress-circle.component'\nimport { TheSeamSegmentedProgressBarComponent } from './segmented-progress-bar/segmented-progress-bar.component'\n\n@NgModule({\n  declarations: [ProgressCircleComponent],\n  imports: [CommonModule, TheSeamSegmentedProgressBarComponent],\n  exports: [ProgressCircleComponent, TheSeamSegmentedProgressBarComponent],\n})\nexport class TheSeamProgressModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/theseam-ui-common-tabbed.mjs

@@ -3,8 +3,6 @@ import { Directive, Injectable, Input, Component, TemplateRef, ContentChild, Eve
 import { NgIf, NgTemplateOutlet, NgFor, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { FlexLayoutModule } from '@angular/flex-layout';
-import * as i3 from '@angular/flex-layout/flex';
 import { __decorate } from 'tslib';
 import { InputBoolean } from '@theseam/ui-common/core';
 import { BehaviorSubject, shareReplay, combineLatest, tap } from 'rxjs';
@@ -87,11 +85,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
 class TheSeamTabbedContentComponent {
     tabbedItem;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTabbedContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    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]" }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTabbedContentComponent, decorators: [{
             type: Component,
-            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" }]
+            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"] }]
         }], propDecorators: { tabbedItem: [{
                 type: Input
             }] } });
@@ -227,7 +225,7 @@ class TheSeamTabbedComponent {
         }
     }
     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 });
-    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" }] });
+    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" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TheSeamTabbedComponent, decorators: [{
             type: Component,
@@ -236,9 +234,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         NgFor,
                         AsyncPipe,
                         RouterModule,
-                        FlexLayoutModule,
                         TheSeamTabbedContentComponent,
-                    ], 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"] }]
+                    ], 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"] }]
         }], ctorParameters: () => [{ type: TheSeamTabbedService }, { type: i2.Router }, { type: i2.ActivatedRoute }], propDecorators: { tabbedItems: [{
                 type: ContentChildren,
                 args: [TheSeamTabbedItemComponent]

package/fesm2022/theseam-ui-common-tabbed.mjs.map

@@ -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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"}
+{"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":"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"}

package/framework/top-bar/top-bar-title/top-bar-title.component.scss

@@ -4,3 +4,31 @@ seam-top-bar-title {
   flex-direction: row;
   align-items: center;
 }
+
+.top-bar-title__heading {
+  font-size: 32px;
+}
+
+// fxHide.gt-sm: hidden when screen > 960px
+.top-bar-title__break {
+  display: none;
+
+  @media screen and (max-width: 959px) {
+    display: block;
+  }
+}
+
+// ngStyle.lt-md: font-size 26px when screen <= 959px
+@media screen and (max-width: 959px) {
+  .top-bar-title__heading {
+    font-size: 26px;
+  }
+}
+
+// ngStyle.lt-sm: font-size 20px, line-height 1 when screen <= 599px
+@media screen and (max-width: 599px) {
+  .top-bar-title__heading {
+    font-size: 20px;
+    line-height: 1;
+  }
+}