@telcomdev/ui 0.1.30 → 0.1.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5762,16 +5762,21 @@ class TdLayout {
5762
5762
  headerSlot;
5763
5763
  sidebarSlot;
5764
5764
  footerSlot;
5765
+ headerHost;
5766
+ sidebarHost;
5767
+ hostRef = inject((ElementRef));
5765
5768
  sidebarOpenState = signal(true, /* @ts-ignore */
5766
5769
  ...(ngDevMode ? [{ debugName: "sidebarOpenState" }] : /* istanbul ignore next */ []));
5767
5770
  mobile = signal(false, /* @ts-ignore */
5768
5771
  ...(ngDevMode ? [{ debugName: "mobile" }] : /* istanbul ignore next */ []));
5772
+ resizeObserver;
5769
5773
  fillViewport = true;
5770
5774
  closeSidebarOnBackdrop = true;
5771
5775
  mobileBreakpoint = 960;
5772
5776
  sidebarPlacement = 'auto';
5773
5777
  headerSpan = 'content';
5774
5778
  footerSpan = 'content';
5779
+ mobileSidebarStyle = 'panel';
5775
5780
  set sidebarOpen(value) {
5776
5781
  this.sidebarOpenState.set(value);
5777
5782
  }
@@ -5791,11 +5796,42 @@ class TdLayout {
5791
5796
  ngAfterContentInit() {
5792
5797
  this.syncViewport();
5793
5798
  }
5799
+ ngAfterViewInit() {
5800
+ this.updateHeaderOffset();
5801
+ const header = this.headerHost?.nativeElement;
5802
+ if (!header || typeof ResizeObserver === 'undefined') {
5803
+ return;
5804
+ }
5805
+ this.resizeObserver = new ResizeObserver(() => this.updateHeaderOffset());
5806
+ this.resizeObserver.observe(header);
5807
+ }
5808
+ ngOnDestroy() {
5809
+ this.resizeObserver?.disconnect();
5810
+ }
5794
5811
  syncViewport() {
5795
5812
  if (typeof window === 'undefined') {
5796
5813
  return;
5797
5814
  }
5798
5815
  this.mobile.set(window.innerWidth <= this.mobileBreakpoint);
5816
+ this.updateHeaderOffset();
5817
+ }
5818
+ syncOverlayPosition() {
5819
+ this.updateHeaderOffset();
5820
+ }
5821
+ handlePointerDownOutside(event) {
5822
+ if (!this.closeSidebarOnBackdrop || !this.sidebarOpen || !this.sidebarAsOverlay()) {
5823
+ return;
5824
+ }
5825
+ const target = event.target;
5826
+ if (!(target instanceof Node)) {
5827
+ return;
5828
+ }
5829
+ const sidebar = this.sidebarHost?.nativeElement;
5830
+ const header = this.headerHost?.nativeElement;
5831
+ if (sidebar?.contains(target) || header?.contains(target)) {
5832
+ return;
5833
+ }
5834
+ this.closeSidebar();
5799
5835
  }
5800
5836
  sidebarAsOverlay() {
5801
5837
  if (this.sidebarPlacement === 'overlay') {
@@ -5827,6 +5863,14 @@ class TdLayout {
5827
5863
  toggleSidebar() {
5828
5864
  this.setSidebarOpen(!this.sidebarOpen);
5829
5865
  }
5866
+ updateHeaderOffset() {
5867
+ const host = this.hostRef.nativeElement;
5868
+ const header = this.headerHost?.nativeElement;
5869
+ const headerHeight = header?.offsetHeight ?? 0;
5870
+ const viewportOffset = header ? Math.max(header.getBoundingClientRect().bottom, 0) : headerHeight;
5871
+ host.style.setProperty('--td-layout-mobile-header-size', `${headerHeight}px`);
5872
+ host.style.setProperty('--td-layout-mobile-header-offset', `${viewportOffset}px`);
5873
+ }
5830
5874
  setSidebarOpen(value) {
5831
5875
  if (this.sidebarOpen === value) {
5832
5876
  return;
@@ -5835,7 +5879,7 @@ class TdLayout {
5835
5879
  this.sidebarOpenChange.emit(value);
5836
5880
  }
5837
5881
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayout, deps: [], target: i0.ɵɵFactoryTarget.Component });
5838
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdLayout, isStandalone: true, selector: "td-layout, td-shell", inputs: { fillViewport: ["fillViewport", "fillViewport", booleanAttribute], closeSidebarOnBackdrop: ["closeSidebarOnBackdrop", "closeSidebarOnBackdrop", booleanAttribute], mobileBreakpoint: "mobileBreakpoint", sidebarPlacement: "sidebarPlacement", headerSpan: "headerSpan", footerSpan: "footerSpan", sidebarOpen: "sidebarOpen" }, outputs: { sidebarOpenChange: "sidebarOpenChange" }, host: { listeners: { "window:resize": "syncViewport()" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: TdLayoutHeaderSlot, descendants: true }, { propertyName: "sidebarSlot", first: true, predicate: TdLayoutSidebarSlot, descendants: true }, { propertyName: "footerSlot", first: true, predicate: TdLayoutFooterSlot, descendants: true }], ngImport: i0, template: `
5882
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: TdLayout, isStandalone: true, selector: "td-layout, td-shell", inputs: { fillViewport: ["fillViewport", "fillViewport", booleanAttribute], closeSidebarOnBackdrop: ["closeSidebarOnBackdrop", "closeSidebarOnBackdrop", booleanAttribute], mobileBreakpoint: "mobileBreakpoint", sidebarPlacement: "sidebarPlacement", headerSpan: "headerSpan", footerSpan: "footerSpan", mobileSidebarStyle: "mobileSidebarStyle", sidebarOpen: "sidebarOpen" }, outputs: { sidebarOpenChange: "sidebarOpenChange" }, host: { listeners: { "window:resize": "syncViewport()", "window:scroll": "syncOverlayPosition()", "document:pointerdown": "handlePointerDownOutside($event)" } }, queries: [{ propertyName: "headerSlot", first: true, predicate: TdLayoutHeaderSlot, descendants: true }, { propertyName: "sidebarSlot", first: true, predicate: TdLayoutSidebarSlot, descendants: true }, { propertyName: "footerSlot", first: true, predicate: TdLayoutFooterSlot, descendants: true }], viewQueries: [{ propertyName: "headerHost", first: true, predicate: ["headerHost"], descendants: true, read: ElementRef }, { propertyName: "sidebarHost", first: true, predicate: ["sidebarHost"], descendants: true, read: ElementRef }], ngImport: i0, template: `
5839
5883
  <div
5840
5884
  class="td-layout"
5841
5885
  [class.td-layout--viewport]="fillViewport"
@@ -5846,6 +5890,8 @@ class TdLayout {
5846
5890
  [class.td-layout--sidebar-open]="sidebarOpen"
5847
5891
  [class.td-layout--header-full]="headerFullWidth()"
5848
5892
  [class.td-layout--footer-full]="footerFullWidth()"
5893
+ [class.td-layout--mobile-sidebar-card]="mobileSidebarStyle === 'card'"
5894
+ [class.td-layout--mobile-sidebar-panel]="mobileSidebarStyle !== 'card'"
5849
5895
  >
5850
5896
  <div class="td-layout__body">
5851
5897
  @if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
@@ -5853,18 +5899,19 @@ class TdLayout {
5853
5899
  type="button"
5854
5900
  class="td-layout__backdrop"
5855
5901
  aria-label="Cerrar navegación"
5902
+ (pointerdown)="closeSidebar()"
5856
5903
  (click)="closeSidebar()"
5857
5904
  ></button>
5858
5905
  }
5859
5906
 
5860
5907
  @if (hasHeader) {
5861
- <div class="td-layout__header">
5908
+ <div #headerHost class="td-layout__header">
5862
5909
  <ng-content select="[tdLayoutHeader]"></ng-content>
5863
5910
  </div>
5864
5911
  }
5865
5912
 
5866
5913
  @if (hasSidebar) {
5867
- <aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
5914
+ <aside #sidebarHost class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
5868
5915
  <ng-content select="[tdLayoutSidebar]"></ng-content>
5869
5916
  </aside>
5870
5917
  }
@@ -5881,7 +5928,7 @@ class TdLayout {
5881
5928
  }
5882
5929
  </div>
5883
5930
  </div>
5884
- `, isInline: true, styles: [":host{display:block;min-width:0;--td-layout-mobile-header-offset: 5rem;--td-layout-mobile-overlay-gap: .75rem;--td-layout-mobile-sidebar-width: 18rem}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;min-width:0;min-height:0}.td-layout--viewport{min-height:100dvh}.td-layout__body{position:relative;display:grid;min-width:0;min-height:0;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.td-layout__header,.td-layout__sidebar,.td-layout__content,.td-layout__footer{min-width:0;min-height:0}.td-layout__header,.td-layout__footer{position:relative;z-index:3}.td-layout__sidebar{position:relative;z-index:4;grid-column:1;grid-row:1/span 3}.td-layout__header{grid-column:2;grid-row:1}.td-layout__content{grid-column:2;grid-row:2}.td-layout__footer{grid-column:2;grid-row:3}.td-layout__backdrop{position:absolute;inset:0;z-index:3;border:0;background:#0f172a57;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer}.td-layout:not(.td-layout--sidebar) .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout:not(.td-layout--sidebar) .td-layout__header,.td-layout:not(.td-layout--sidebar) .td-layout__content,.td-layout:not(.td-layout--sidebar) .td-layout__footer{grid-column:1}.td-layout--header-full .td-layout__header{grid-column:1/-1}.td-layout--header-full .td-layout__sidebar{grid-row:2/span 2}.td-layout--header-full .td-layout__content{grid-row:2}.td-layout--header-full .td-layout__footer{grid-row:3}.td-layout--footer-full .td-layout__footer{grid-column:1/-1}.td-layout--footer-full .td-layout__sidebar{grid-row:1/span 2}.td-layout--footer-full .td-layout__content,.td-layout--header-full.td-layout--footer-full .td-layout__sidebar{grid-row:2}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__backdrop{inset:0}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__backdrop{inset-block-start:var(--td-layout-mobile-header-offset)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__header,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__footer{grid-column:1}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:var(--td-layout-mobile-overlay-gap) auto var(--td-layout-mobile-overlay-gap) var(--td-layout-mobile-overlay-gap);width:min(var(--td-layout-mobile-sidebar-width),100% - var(--td-layout-mobile-overlay-gap) * 2);max-width:calc(100% - var(--td-layout-mobile-overlay-gap) * 2);grid-column:auto;grid-row:auto;overflow:hidden;border-radius:1rem;box-shadow:0 18px 40px #0f172a38;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__sidebar{inset-block-start:calc(var(--td-layout-mobile-header-offset) + .35rem)}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__sidebar{transform:translate(0);visibility:visible;pointer-events:auto}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5931
+ `, isInline: true, styles: [":host{display:block;min-width:0;min-height:0;--td-layout-mobile-header-offset: 5rem;--td-layout-mobile-header-size: 5rem;--td-layout-mobile-sidebar-width: 18rem;--td-layout-mobile-sidebar-card-gap: .75rem}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;display:grid;width:100%;min-width:0;min-height:0}.td-layout--viewport{min-height:100dvh;height:100dvh}.td-layout__body{position:relative;display:grid;width:100%;height:100%;min-width:0;min-height:100%;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.td-layout__header,.td-layout__sidebar,.td-layout__content,.td-layout__footer{min-width:0;min-height:0}.td-layout__header,.td-layout__footer{position:relative;z-index:3}.td-layout__sidebar{position:relative;z-index:4;grid-column:1;grid-row:1/span 3}.td-layout__header{grid-column:2;grid-row:1}.td-layout__content{grid-column:2;grid-row:2;align-self:stretch}.td-layout__footer{grid-column:2;grid-row:3}.td-layout__backdrop{position:absolute;inset:0;z-index:3;border:0;display:block;appearance:none;opacity:1;background:#0f172a57;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer}.td-layout:not(.td-layout--sidebar) .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout:not(.td-layout--sidebar) .td-layout__header,.td-layout:not(.td-layout--sidebar) .td-layout__content,.td-layout:not(.td-layout--sidebar) .td-layout__footer{grid-column:1}.td-layout--header-full .td-layout__header{grid-column:1/-1}.td-layout--header-full .td-layout__sidebar{grid-row:2/span 2}.td-layout--header-full .td-layout__content{grid-row:2}.td-layout--header-full .td-layout__footer{grid-row:3}.td-layout--footer-full .td-layout__footer{grid-column:1/-1}.td-layout--footer-full .td-layout__sidebar{grid-row:1/span 2}.td-layout--footer-full .td-layout__content,.td-layout--header-full.td-layout--footer-full .td-layout__sidebar{grid-row:2}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__backdrop{position:fixed;inset:0;z-index:30;pointer-events:auto;touch-action:none;background:#0f172a6b}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__backdrop{inset-block-start:var(--td-layout-mobile-header-offset)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__header,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__footer{grid-column:1}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:0 auto 0 0;width:min(var(--td-layout-mobile-sidebar-width),100%);max-width:100%;grid-column:auto;grid-row:auto;overflow:hidden;border-radius:0 1rem 0 0;box-shadow:0 20px 40px #0f172a33;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none;z-index:40}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__sidebar{inset-block-start:var(--td-layout-mobile-header-size)}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--mobile-sidebar-panel .td-layout__sidebar{inset-inline-start:0;inset-inline-end:auto;inset-block-end:0;width:min(var(--td-layout-mobile-sidebar-width),100%);max-width:100%;border-radius:0 1rem 0 0}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--mobile-sidebar-card .td-layout__sidebar{inset-inline-start:.75rem;inset-inline-end:auto;inset-block-end:.75rem;width:min(var(--td-layout-mobile-sidebar-width),100% - 1.5rem);max-width:calc(100% - 1.5rem);border-radius:1rem}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--mobile-sidebar-card.td-layout--has-header .td-layout__sidebar{inset-block-start:calc(var(--td-layout-mobile-header-size) + var(--td-layout-mobile-sidebar-card-gap))}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__sidebar{transform:translate(0);visibility:visible;pointer-events:auto}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__header,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__footer{-webkit-user-select:none;user-select:none}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__header{z-index:50}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__footer{position:relative;z-index:1}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__footer{pointer-events:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
5885
5932
  }
5886
5933
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayout, decorators: [{
5887
5934
  type: Component,
@@ -5896,6 +5943,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5896
5943
  [class.td-layout--sidebar-open]="sidebarOpen"
5897
5944
  [class.td-layout--header-full]="headerFullWidth()"
5898
5945
  [class.td-layout--footer-full]="footerFullWidth()"
5946
+ [class.td-layout--mobile-sidebar-card]="mobileSidebarStyle === 'card'"
5947
+ [class.td-layout--mobile-sidebar-panel]="mobileSidebarStyle !== 'card'"
5899
5948
  >
5900
5949
  <div class="td-layout__body">
5901
5950
  @if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
@@ -5903,18 +5952,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5903
5952
  type="button"
5904
5953
  class="td-layout__backdrop"
5905
5954
  aria-label="Cerrar navegación"
5955
+ (pointerdown)="closeSidebar()"
5906
5956
  (click)="closeSidebar()"
5907
5957
  ></button>
5908
5958
  }
5909
5959
 
5910
5960
  @if (hasHeader) {
5911
- <div class="td-layout__header">
5961
+ <div #headerHost class="td-layout__header">
5912
5962
  <ng-content select="[tdLayoutHeader]"></ng-content>
5913
5963
  </div>
5914
5964
  }
5915
5965
 
5916
5966
  @if (hasSidebar) {
5917
- <aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
5967
+ <aside #sidebarHost class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
5918
5968
  <ng-content select="[tdLayoutSidebar]"></ng-content>
5919
5969
  </aside>
5920
5970
  }
@@ -5931,7 +5981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5931
5981
  }
5932
5982
  </div>
5933
5983
  </div>
5934
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;--td-layout-mobile-header-offset: 5rem;--td-layout-mobile-overlay-gap: .75rem;--td-layout-mobile-sidebar-width: 18rem}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;min-width:0;min-height:0}.td-layout--viewport{min-height:100dvh}.td-layout__body{position:relative;display:grid;min-width:0;min-height:0;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.td-layout__header,.td-layout__sidebar,.td-layout__content,.td-layout__footer{min-width:0;min-height:0}.td-layout__header,.td-layout__footer{position:relative;z-index:3}.td-layout__sidebar{position:relative;z-index:4;grid-column:1;grid-row:1/span 3}.td-layout__header{grid-column:2;grid-row:1}.td-layout__content{grid-column:2;grid-row:2}.td-layout__footer{grid-column:2;grid-row:3}.td-layout__backdrop{position:absolute;inset:0;z-index:3;border:0;background:#0f172a57;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer}.td-layout:not(.td-layout--sidebar) .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout:not(.td-layout--sidebar) .td-layout__header,.td-layout:not(.td-layout--sidebar) .td-layout__content,.td-layout:not(.td-layout--sidebar) .td-layout__footer{grid-column:1}.td-layout--header-full .td-layout__header{grid-column:1/-1}.td-layout--header-full .td-layout__sidebar{grid-row:2/span 2}.td-layout--header-full .td-layout__content{grid-row:2}.td-layout--header-full .td-layout__footer{grid-row:3}.td-layout--footer-full .td-layout__footer{grid-column:1/-1}.td-layout--footer-full .td-layout__sidebar{grid-row:1/span 2}.td-layout--footer-full .td-layout__content,.td-layout--header-full.td-layout--footer-full .td-layout__sidebar{grid-row:2}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__backdrop{inset:0}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__backdrop{inset-block-start:var(--td-layout-mobile-header-offset)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__header,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__footer{grid-column:1}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:var(--td-layout-mobile-overlay-gap) auto var(--td-layout-mobile-overlay-gap) var(--td-layout-mobile-overlay-gap);width:min(var(--td-layout-mobile-sidebar-width),100% - var(--td-layout-mobile-overlay-gap) * 2);max-width:calc(100% - var(--td-layout-mobile-overlay-gap) * 2);grid-column:auto;grid-row:auto;overflow:hidden;border-radius:1rem;box-shadow:0 18px 40px #0f172a38;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__sidebar{inset-block-start:calc(var(--td-layout-mobile-header-offset) + .35rem)}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__sidebar{transform:translate(0);visibility:visible;pointer-events:auto}\n"] }]
5984
+ `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;min-height:0;--td-layout-mobile-header-offset: 5rem;--td-layout-mobile-header-size: 5rem;--td-layout-mobile-sidebar-width: 18rem;--td-layout-mobile-sidebar-card-gap: .75rem}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;display:grid;width:100%;min-width:0;min-height:0}.td-layout--viewport{min-height:100dvh;height:100dvh}.td-layout__body{position:relative;display:grid;width:100%;height:100%;min-width:0;min-height:100%;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}.td-layout__header,.td-layout__sidebar,.td-layout__content,.td-layout__footer{min-width:0;min-height:0}.td-layout__header,.td-layout__footer{position:relative;z-index:3}.td-layout__sidebar{position:relative;z-index:4;grid-column:1;grid-row:1/span 3}.td-layout__header{grid-column:2;grid-row:1}.td-layout__content{grid-column:2;grid-row:2;align-self:stretch}.td-layout__footer{grid-column:2;grid-row:3}.td-layout__backdrop{position:absolute;inset:0;z-index:3;border:0;display:block;appearance:none;opacity:1;background:#0f172a57;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);cursor:pointer}.td-layout:not(.td-layout--sidebar) .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout:not(.td-layout--sidebar) .td-layout__header,.td-layout:not(.td-layout--sidebar) .td-layout__content,.td-layout:not(.td-layout--sidebar) .td-layout__footer{grid-column:1}.td-layout--header-full .td-layout__header{grid-column:1/-1}.td-layout--header-full .td-layout__sidebar{grid-row:2/span 2}.td-layout--header-full .td-layout__content{grid-row:2}.td-layout--header-full .td-layout__footer{grid-row:3}.td-layout--footer-full .td-layout__footer{grid-column:1/-1}.td-layout--footer-full .td-layout__sidebar{grid-row:1/span 2}.td-layout--footer-full .td-layout__content,.td-layout--header-full.td-layout--footer-full .td-layout__sidebar{grid-row:2}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__backdrop{position:fixed;inset:0;z-index:30;pointer-events:auto;touch-action:none;background:#0f172a6b}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__backdrop{inset-block-start:var(--td-layout-mobile-header-offset)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__header,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay .td-layout__footer{grid-column:1}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:0 auto 0 0;width:min(var(--td-layout-mobile-sidebar-width),100%);max-width:100%;grid-column:auto;grid-row:auto;overflow:hidden;border-radius:0 1rem 0 0;box-shadow:0 20px 40px #0f172a33;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none;z-index:40}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--has-header .td-layout__sidebar{inset-block-start:var(--td-layout-mobile-header-size)}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--mobile-sidebar-panel .td-layout__sidebar{inset-inline-start:0;inset-inline-end:auto;inset-block-end:0;width:min(var(--td-layout-mobile-sidebar-width),100%);max-width:100%;border-radius:0 1rem 0 0}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--mobile-sidebar-card .td-layout__sidebar{inset-inline-start:.75rem;inset-inline-end:auto;inset-block-end:.75rem;width:min(var(--td-layout-mobile-sidebar-width),100% - 1.5rem);max-width:calc(100% - 1.5rem);border-radius:1rem}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--mobile-sidebar-card.td-layout--has-header .td-layout__sidebar{inset-block-start:calc(var(--td-layout-mobile-header-size) + var(--td-layout-mobile-sidebar-card-gap))}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__sidebar{transform:translate(0);visibility:visible;pointer-events:auto}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__header,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__footer{-webkit-user-select:none;user-select:none}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__header{z-index:50}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__footer{position:relative;z-index:1}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__content,.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__footer{pointer-events:none}\n"] }]
5935
5985
  }], propDecorators: { headerSlot: [{
5936
5986
  type: ContentChild,
5937
5987
  args: [TdLayoutHeaderSlot]
@@ -5941,6 +5991,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5941
5991
  }], footerSlot: [{
5942
5992
  type: ContentChild,
5943
5993
  args: [TdLayoutFooterSlot]
5994
+ }], headerHost: [{
5995
+ type: ViewChild,
5996
+ args: ['headerHost', { read: ElementRef }]
5997
+ }], sidebarHost: [{
5998
+ type: ViewChild,
5999
+ args: ['sidebarHost', { read: ElementRef }]
5944
6000
  }], fillViewport: [{
5945
6001
  type: Input,
5946
6002
  args: [{ transform: booleanAttribute }]
@@ -5955,6 +6011,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5955
6011
  type: Input
5956
6012
  }], footerSpan: [{
5957
6013
  type: Input
6014
+ }], mobileSidebarStyle: [{
6015
+ type: Input
5958
6016
  }], sidebarOpen: [{
5959
6017
  type: Input
5960
6018
  }], sidebarOpenChange: [{
@@ -5962,6 +6020,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5962
6020
  }], syncViewport: [{
5963
6021
  type: HostListener,
5964
6022
  args: ['window:resize']
6023
+ }], syncOverlayPosition: [{
6024
+ type: HostListener,
6025
+ args: ['window:scroll']
6026
+ }], handlePointerDownOutside: [{
6027
+ type: HostListener,
6028
+ args: ['document:pointerdown', ['$event']]
5965
6029
  }] } });
5966
6030
 
5967
6031
  let radioSequence = 0;