@telcomdev/ui 0.1.28 → 0.1.29
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.
|
@@ -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() {
|
|
@@ -5840,12 +5846,6 @@ class TdLayout {
|
|
|
5840
5846
|
[class.td-layout--header-full]="headerFullWidth()"
|
|
5841
5847
|
[class.td-layout--footer-full]="footerFullWidth()"
|
|
5842
5848
|
>
|
|
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
5849
|
<div class="td-layout__body">
|
|
5850
5850
|
@if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
|
|
5851
5851
|
<button
|
|
@@ -5856,39 +5856,31 @@ class TdLayout {
|
|
|
5856
5856
|
></button>
|
|
5857
5857
|
}
|
|
5858
5858
|
|
|
5859
|
+
@if (hasHeader) {
|
|
5860
|
+
<div class="td-layout__header">
|
|
5861
|
+
<ng-content select="[tdLayoutHeader]"></ng-content>
|
|
5862
|
+
</div>
|
|
5863
|
+
}
|
|
5864
|
+
|
|
5859
5865
|
@if (hasSidebar) {
|
|
5860
5866
|
<aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
|
|
5861
5867
|
<ng-content select="[tdLayoutSidebar]"></ng-content>
|
|
5862
5868
|
</aside>
|
|
5863
5869
|
}
|
|
5864
5870
|
|
|
5865
|
-
<
|
|
5866
|
-
|
|
5867
|
-
|
|
5868
|
-
|
|
5869
|
-
</div>
|
|
5870
|
-
}
|
|
5871
|
-
|
|
5872
|
-
<main class="td-layout__content">
|
|
5873
|
-
<ng-content select="[tdLayoutContent]"></ng-content>
|
|
5874
|
-
<ng-content></ng-content>
|
|
5875
|
-
</main>
|
|
5871
|
+
<main class="td-layout__content">
|
|
5872
|
+
<ng-content select="[tdLayoutContent]"></ng-content>
|
|
5873
|
+
<ng-content></ng-content>
|
|
5874
|
+
</main>
|
|
5876
5875
|
|
|
5877
|
-
|
|
5878
|
-
|
|
5879
|
-
|
|
5880
|
-
|
|
5881
|
-
|
|
5882
|
-
</div>
|
|
5876
|
+
@if (hasFooter) {
|
|
5877
|
+
<div class="td-layout__footer">
|
|
5878
|
+
<ng-content select="[tdLayoutFooter]"></ng-content>
|
|
5879
|
+
</div>
|
|
5880
|
+
}
|
|
5883
5881
|
</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
5882
|
</div>
|
|
5891
|
-
`, isInline: true, styles: [":host{display:block;min-width:0}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;
|
|
5883
|
+
`, isInline: true, styles: [":host{display:block;min-width:0}.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__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(86vw,22rem);max-width:100%;grid-column:auto;grid-row:auto;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 });
|
|
5892
5884
|
}
|
|
5893
5885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: TdLayout, decorators: [{
|
|
5894
5886
|
type: Component,
|
|
@@ -5903,12 +5895,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
5903
5895
|
[class.td-layout--header-full]="headerFullWidth()"
|
|
5904
5896
|
[class.td-layout--footer-full]="footerFullWidth()"
|
|
5905
5897
|
>
|
|
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
5898
|
<div class="td-layout__body">
|
|
5913
5899
|
@if (hasSidebar && sidebarAsOverlay() && sidebarOpen && closeSidebarOnBackdrop) {
|
|
5914
5900
|
<button
|
|
@@ -5919,39 +5905,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
5919
5905
|
></button>
|
|
5920
5906
|
}
|
|
5921
5907
|
|
|
5908
|
+
@if (hasHeader) {
|
|
5909
|
+
<div class="td-layout__header">
|
|
5910
|
+
<ng-content select="[tdLayoutHeader]"></ng-content>
|
|
5911
|
+
</div>
|
|
5912
|
+
}
|
|
5913
|
+
|
|
5922
5914
|
@if (hasSidebar) {
|
|
5923
5915
|
<aside class="td-layout__sidebar" [attr.aria-hidden]="sidebarAsOverlay() && !sidebarOpen">
|
|
5924
5916
|
<ng-content select="[tdLayoutSidebar]"></ng-content>
|
|
5925
5917
|
</aside>
|
|
5926
5918
|
}
|
|
5927
5919
|
|
|
5928
|
-
<
|
|
5929
|
-
|
|
5930
|
-
|
|
5931
|
-
|
|
5932
|
-
</div>
|
|
5933
|
-
}
|
|
5920
|
+
<main class="td-layout__content">
|
|
5921
|
+
<ng-content select="[tdLayoutContent]"></ng-content>
|
|
5922
|
+
<ng-content></ng-content>
|
|
5923
|
+
</main>
|
|
5934
5924
|
|
|
5935
|
-
|
|
5936
|
-
|
|
5937
|
-
<ng-content></ng-content>
|
|
5938
|
-
</
|
|
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>
|
|
5925
|
+
@if (hasFooter) {
|
|
5926
|
+
<div class="td-layout__footer">
|
|
5927
|
+
<ng-content select="[tdLayoutFooter]"></ng-content>
|
|
5928
|
+
</div>
|
|
5929
|
+
}
|
|
5946
5930
|
</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
5931
|
</div>
|
|
5954
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0}.td-layout,.td-layout *{box-sizing:border-box}.td-layout{position:relative;
|
|
5932
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0}.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__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(86vw,22rem);max-width:100%;grid-column:auto;grid-row:auto;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"] }]
|
|
5955
5933
|
}], propDecorators: { headerSlot: [{
|
|
5956
5934
|
type: ContentChild,
|
|
5957
5935
|
args: [TdLayoutHeaderSlot]
|