@telcomdev/ui 0.1.28 → 0.1.30

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.
Files changed (4) hide show
  1. package/fesm2022/telcomdev-ui.mjs +40 -60
  2. package/fesm2022/telcomdev-ui.mjs.map +1 -1
  3. package/package.json +1 -1
  4. package/types/telcomdev-ui.d.ts +1 -1
package/fesm2022/telcomdev-ui.mjs CHANGED
@@ -5807,9 +5807,15 @@ class TdLayout {
5807
5807
  return this.mobile();
5808
5808
  }
5809
5809
  headerFullWidth() {
5810
+ if (this.mobile()) {
5811
+ return true;
5812
+ }
5810
5813
  return this.headerSpan === 'full';
5811
5814
  }
5812
5815
  footerFullWidth() {
5816
+ if (this.mobile()) {
5817
+ return false;
5818
+ }
5813
5819
  return this.footerSpan === 'full';
5814
5820
  }
5815
5821
  openSidebar() {
@@ -5834,18 +5840,13 @@ class TdLayout {
5834
5840
  class="td-layout"
5835
5841
  [class.td-layout--viewport]="fillViewport"
5836
5842
  [class.td-layout--mobile]="mobile()"
5843
+ [class.td-layout--has-header]="hasHeader"
5837
5844
  [class.td-layout--sidebar]="hasSidebar"
5838
5845
  [class.td-layout--sidebar-overlay]="sidebarAsOverlay()"
5839
5846
  [class.td-layout--sidebar-open]="sidebarOpen"
5840
5847
  [class.td-layout--header-full]="headerFullWidth()"
5841
5848
  [class.td-layout--footer-full]="footerFullWidth()"
5842
5849
  >
5843
- @if (hasHeader && headerFullWidth()) {
5844
- <div class="td-layout__header td-layout__header--full">
5845
- <ng-content select="[tdLayoutHeader]"></ng-content>
5846
- </div>
5847
- }
5848
-
5849
5850
  <div class="td-layout__body">
5850
5851
  @if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
5851
5852
  <button
@@ -5856,39 +5857,31 @@ class TdLayout {
5856
5857
  ></button>
5857
5858
  }
5858
5859
 
5860
+ @if (hasHeader) {
5861
+ <div class="td-layout__header">
5862
+ <ng-content select="[tdLayoutHeader]"></ng-content>
5863
+ </div>
5864
+ }
5865
+
5859
5866
  @if (hasSidebar) {
5860
5867
  <aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
5861
5868
  <ng-content select="[tdLayoutSidebar]"></ng-content>
5862
5869
  </aside>
5863
5870
  }
5864
5871
 
5865
- <div class="td-layout__main">
5866
- @if (hasHeader && !headerFullWidth()) {
5867
- <div class="td-layout__header td-layout__header--content">
5868
- <ng-content select="[tdLayoutHeader]"></ng-content>
5869
- </div>
5870
- }
5871
-
5872
- <main class="td-layout__content">
5873
- <ng-content select="[tdLayoutContent]"></ng-content>
5874
- <ng-content></ng-content>
5875
- </main>
5872
+ <main class="td-layout__content">
5873
+ <ng-content select="[tdLayoutContent]"></ng-content>
5874
+ <ng-content></ng-content>
5875
+ </main>
5876
5876
 
5877
- @if (hasFooter && !footerFullWidth()) {
5878
- <div class="td-layout__footer td-layout__footer--content">
5879
- <ng-content select="[tdLayoutFooter]"></ng-content>
5880
- </div>
5881
- }
5882
- </div>
5877
+ @if (hasFooter) {
5878
+ <div class="td-layout__footer">
5879
+ <ng-content select="[tdLayoutFooter]"></ng-content>
5880
+ </div>
5881
+ }
5883
5882
  </div>
5884
-
5885
- @if (hasFooter && footerFullWidth()) {
5886
- <div class="td-layout__footer td-layout__footer--full">
5887
- <ng-content select="[tdLayoutFooter]"></ng-content>
5888
- </div>
5889
- }
5890
5883
  </div>
5891
- `, isInline: true, styles: [":host{display:block;min-width:0}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout--viewport{min-height:100dvh}.td-layout__header,.td-layout__body,.td-layout__main,.td-layout__content,.td-layout__footer{min-width:0}.td-layout__body{position:relative;display:grid;min-width:0;min-height:0;grid-template-columns:auto minmax(0,1fr)}.td-layout__main{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout__content,.td-layout__sidebar{min-width:0;min-height:0}.td-layout__sidebar{position:relative;z-index:4}.td-layout__header,.td-layout__footer{position:relative;z-index: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--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:0 auto 0 0;width:min(86vw,22rem);max-width:100%;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none}.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 });
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 });
5892
5885
  }
5893
5886
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayout, decorators: [{
5894
5887
  type: Component,
@@ -5897,18 +5890,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5897
5890
  class="td-layout"
5898
5891
  [class.td-layout--viewport]="fillViewport"
5899
5892
  [class.td-layout--mobile]="mobile()"
5893
+ [class.td-layout--has-header]="hasHeader"
5900
5894
  [class.td-layout--sidebar]="hasSidebar"
5901
5895
  [class.td-layout--sidebar-overlay]="sidebarAsOverlay()"
5902
5896
  [class.td-layout--sidebar-open]="sidebarOpen"
5903
5897
  [class.td-layout--header-full]="headerFullWidth()"
5904
5898
  [class.td-layout--footer-full]="footerFullWidth()"
5905
5899
  >
5906
- @if (hasHeader && headerFullWidth()) {
5907
- <div class="td-layout__header td-layout__header--full">
5908
- <ng-content select="[tdLayoutHeader]"></ng-content>
5909
- </div>
5910
- }
5911
-
5912
5900
  <div class="td-layout__body">
5913
5901
  @if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
5914
5902
  <button
@@ -5919,39 +5907,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
5919
5907
  ></button>
5920
5908
  }
5921
5909
 
5910
+ @if (hasHeader) {
5911
+ <div class="td-layout__header">
5912
+ <ng-content select="[tdLayoutHeader]"></ng-content>
5913
+ </div>
5914
+ }
5915
+
5922
5916
  @if (hasSidebar) {
5923
5917
  <aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
5924
5918
  <ng-content select="[tdLayoutSidebar]"></ng-content>
5925
5919
  </aside>
5926
5920
  }
5927
5921
 
5928
- <div class="td-layout__main">
5929
- @if (hasHeader && !headerFullWidth()) {
5930
- <div class="td-layout__header td-layout__header--content">
5931
- <ng-content select="[tdLayoutHeader]"></ng-content>
5932
- </div>
5933
- }
5922
+ <main class="td-layout__content">
5923
+ <ng-content select="[tdLayoutContent]"></ng-content>
5924
+ <ng-content></ng-content>
5925
+ </main>
5934
5926
 
5935
- <main class="td-layout__content">
5936
- <ng-content select="[tdLayoutContent]"></ng-content>
5937
- <ng-content></ng-content>
5938
- </main>
5939
-
5940
- @if (hasFooter && !footerFullWidth()) {
5941
- <div class="td-layout__footer td-layout__footer--content">
5942
- <ng-content select="[tdLayoutFooter]"></ng-content>
5943
- </div>
5944
- }
5945
- </div>
5927
+ @if (hasFooter) {
5928
+ <div class="td-layout__footer">
5929
+ <ng-content select="[tdLayoutFooter]"></ng-content>
5930
+ </div>
5931
+ }
5946
5932
  </div>
5947
-
5948
- @if (hasFooter && footerFullWidth()) {
5949
- <div class="td-layout__footer td-layout__footer--full">
5950
- <ng-content select="[tdLayoutFooter]"></ng-content>
5951
- </div>
5952
- }
5953
5933
  </div>
5954
- `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout--viewport{min-height:100dvh}.td-layout__header,.td-layout__body,.td-layout__main,.td-layout__content,.td-layout__footer{min-width:0}.td-layout__body{position:relative;display:grid;min-width:0;min-height:0;grid-template-columns:auto minmax(0,1fr)}.td-layout__main{display:grid;min-width:0;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}.td-layout__content,.td-layout__sidebar{min-width:0;min-height:0}.td-layout__sidebar{position:relative;z-index:4}.td-layout__header,.td-layout__footer{position:relative;z-index: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--mobile.td-layout--sidebar-overlay .td-layout__body{grid-template-columns:minmax(0,1fr)}.td-layout--mobile.td-layout--sidebar-overlay .td-layout__sidebar{position:absolute;inset:0 auto 0 0;width:min(86vw,22rem);max-width:100%;transform:translate(-108%);transition:transform .18s ease,visibility .18s ease;visibility:hidden;pointer-events:none}.td-layout--mobile.td-layout--sidebar-overlay.td-layout--sidebar-open .td-layout__sidebar{transform:translate(0);visibility:visible;pointer-events:auto}\n"] }]
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"] }]
5955
5935
  }], propDecorators: { headerSlot: [{
5956
5936
  type: ContentChild,
5957
5937
  args: [TdLayoutHeaderSlot]