@propbinder/mobile-design 0.3.39 → 0.3.41
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.
|
@@ -665,62 +665,146 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
665
665
|
}] } });
|
|
666
666
|
|
|
667
667
|
/**
|
|
668
|
-
*
|
|
668
|
+
* DsMobileSkeletonLoaderComponent
|
|
669
669
|
*
|
|
670
|
-
* Reusable loader overlay
|
|
671
|
-
*
|
|
672
|
-
* with a solid background, but rather blurring the content behind it.
|
|
670
|
+
* Reusable skeleton list loader overlay.
|
|
671
|
+
* Features a modern shimmer layout representing list data.
|
|
673
672
|
*
|
|
674
673
|
* Features:
|
|
675
|
-
* -
|
|
676
|
-
* -
|
|
677
|
-
* -
|
|
678
|
-
* - Absolute positioning to cover parent
|
|
674
|
+
* - Skeleton list layout mimicking standard data rows
|
|
675
|
+
* - Shimmer animation effect
|
|
676
|
+
* - Transparent background (overlays content directly)
|
|
679
677
|
*/
|
|
680
|
-
class
|
|
681
|
-
/**
|
|
682
|
-
* Size of the spinner in pixels
|
|
683
|
-
* @default 24
|
|
684
|
-
*/
|
|
685
|
-
spinnerSize = input(24, ...(ngDevMode ? [{ debugName: "spinnerSize" }] : []));
|
|
678
|
+
class DsMobileSkeletonLoaderComponent {
|
|
686
679
|
/**
|
|
687
680
|
* Border radius of the overlay in pixels (should match parent's border radius)
|
|
688
681
|
* @default 0
|
|
689
682
|
*/
|
|
690
683
|
borderRadius = input(0, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
684
|
+
/**
|
|
685
|
+
* Variant of the skeleton layout
|
|
686
|
+
* @default 'list'
|
|
687
|
+
*/
|
|
688
|
+
variant = input('list', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
689
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSkeletonLoaderComponent, isStandalone: true, selector: "ds-mobile-skeleton-loader", inputs: { borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
691
|
+
<div
|
|
692
|
+
class="skeleton-loader-overlay"
|
|
693
|
+
[style.border-radius.px]="borderRadius()"
|
|
694
|
+
role="status"
|
|
695
|
+
aria-live="polite"
|
|
696
|
+
aria-label="Loading">
|
|
697
|
+
|
|
698
|
+
<!-- List Variant (Default) -->
|
|
699
|
+
@if (variant() === 'list') {
|
|
700
|
+
<div class="skeleton-list">
|
|
701
|
+
@for (i of [1, 2, 3, 4]; track i) {
|
|
702
|
+
<div class="skeleton-item">
|
|
703
|
+
<div class="skeleton-avatar shimmer"></div>
|
|
704
|
+
<div class="skeleton-text-container">
|
|
705
|
+
<div class="skeleton-text-line shimmer"></div>
|
|
706
|
+
<div class="skeleton-text-line shimmer short"></div>
|
|
707
|
+
</div>
|
|
708
|
+
</div>
|
|
709
|
+
}
|
|
710
|
+
</div>
|
|
711
|
+
}
|
|
712
|
+
|
|
713
|
+
<!-- Card Variant -->
|
|
714
|
+
@if (variant() === 'card') {
|
|
715
|
+
<div class="skeleton-card-list">
|
|
716
|
+
@for (i of [1, 2]; track i) {
|
|
717
|
+
<div class="skeleton-card pulse"></div>
|
|
718
|
+
}
|
|
719
|
+
</div>
|
|
720
|
+
}
|
|
721
|
+
|
|
722
|
+
<!-- Details Variant -->
|
|
723
|
+
@if (variant() === 'details') {
|
|
724
|
+
<div class="skeleton-details">
|
|
725
|
+
<div class="skeleton-title pulse"></div>
|
|
726
|
+
<div class="skeleton-text-line pulse full"></div>
|
|
727
|
+
<div class="skeleton-text-line pulse full"></div>
|
|
728
|
+
<div class="skeleton-text-line pulse short"></div>
|
|
729
|
+
<div class="skeleton-box pulse"></div>
|
|
730
|
+
</div>
|
|
731
|
+
}
|
|
732
|
+
|
|
733
|
+
<!-- Handbook Variant (Grid of folders) -->
|
|
734
|
+
@if (variant() === 'handbook') {
|
|
735
|
+
<div class="skeleton-handbook-grid">
|
|
736
|
+
@for (i of [1, 2, 3, 4]; track i) {
|
|
737
|
+
<div class="skeleton-folder-card">
|
|
738
|
+
<div class="skeleton-folder-icon pulse"></div>
|
|
739
|
+
<div class="skeleton-text-line pulse" style="width: 80%;"></div>
|
|
740
|
+
<div class="skeleton-text-line pulse short"></div>
|
|
741
|
+
</div>
|
|
742
|
+
}
|
|
743
|
+
</div>
|
|
744
|
+
}
|
|
745
|
+
</div>
|
|
746
|
+
`, isInline: true, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:16px;overflow:hidden;pointer-events:none}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.skeleton-text-line.full{width:100%}.skeleton-card-list{display:flex;flex-direction:column;gap:16px;width:100%}.skeleton-card{width:100%;height:120px;border-radius:12px}.skeleton-details{display:flex;flex-direction:column;gap:12px;width:100%}.skeleton-title{width:70%;height:24px;border-radius:8px;margin-bottom:16px}.skeleton-box{width:100%;height:200px;border-radius:12px;margin-top:16px}.skeleton-handbook-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.skeleton-folder-card{display:flex;flex-direction:column;align-items:center;gap:10px}.skeleton-folder-icon{width:100%;aspect-ratio:1;border-radius:16px}.shimmer{background:#f2f4f5;background-image:linear-gradient(90deg,#fff0 0,#fff9 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}body.dark .shimmer,.dark-theme .shimmer{background:#2a2a2a;background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}.pulse{background:#f2f4f5;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{background-color:#f2f4f5}50%{background-color:#e6e8ec}to{background-color:#f2f4f5}}body.dark .pulse,.dark-theme .pulse{background:#2a2a2a;animation:pulse-dark 2s infinite ease-in-out}@keyframes pulse-dark{0%{background-color:#2a2a2a}50%{background-color:#383838}to{background-color:#2a2a2a}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
706
747
|
}
|
|
707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type:
|
|
748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, decorators: [{
|
|
708
749
|
type: Component,
|
|
709
|
-
args: [{ selector: 'ds-mobile-
|
|
710
|
-
<div
|
|
711
|
-
class="
|
|
712
|
-
[style.border-radius.px]="borderRadius()"
|
|
713
|
-
role="status"
|
|
714
|
-
aria-live="polite"
|
|
715
|
-
aria-label="Loading">
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
750
|
+
args: [{ selector: 'ds-mobile-skeleton-loader', standalone: true, imports: [CommonModule], template: `
|
|
751
|
+
<div
|
|
752
|
+
class="skeleton-loader-overlay"
|
|
753
|
+
[style.border-radius.px]="borderRadius()"
|
|
754
|
+
role="status"
|
|
755
|
+
aria-live="polite"
|
|
756
|
+
aria-label="Loading">
|
|
757
|
+
|
|
758
|
+
<!-- List Variant (Default) -->
|
|
759
|
+
@if (variant() === 'list') {
|
|
760
|
+
<div class="skeleton-list">
|
|
761
|
+
@for (i of [1, 2, 3, 4]; track i) {
|
|
762
|
+
<div class="skeleton-item">
|
|
763
|
+
<div class="skeleton-avatar shimmer"></div>
|
|
764
|
+
<div class="skeleton-text-container">
|
|
765
|
+
<div class="skeleton-text-line shimmer"></div>
|
|
766
|
+
<div class="skeleton-text-line shimmer short"></div>
|
|
767
|
+
</div>
|
|
768
|
+
</div>
|
|
769
|
+
}
|
|
770
|
+
</div>
|
|
771
|
+
}
|
|
772
|
+
|
|
773
|
+
<!-- Card Variant -->
|
|
774
|
+
@if (variant() === 'card') {
|
|
775
|
+
<div class="skeleton-card-list">
|
|
776
|
+
@for (i of [1, 2]; track i) {
|
|
777
|
+
<div class="skeleton-card pulse"></div>
|
|
778
|
+
}
|
|
779
|
+
</div>
|
|
780
|
+
}
|
|
781
|
+
|
|
782
|
+
<!-- Details Variant -->
|
|
783
|
+
@if (variant() === 'details') {
|
|
784
|
+
<div class="skeleton-details">
|
|
785
|
+
<div class="skeleton-title pulse"></div>
|
|
786
|
+
<div class="skeleton-text-line pulse full"></div>
|
|
787
|
+
<div class="skeleton-text-line pulse full"></div>
|
|
788
|
+
<div class="skeleton-text-line pulse short"></div>
|
|
789
|
+
<div class="skeleton-box pulse"></div>
|
|
790
|
+
</div>
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
<!-- Handbook Variant (Grid of folders) -->
|
|
794
|
+
@if (variant() === 'handbook') {
|
|
795
|
+
<div class="skeleton-handbook-grid">
|
|
796
|
+
@for (i of [1, 2, 3, 4]; track i) {
|
|
797
|
+
<div class="skeleton-folder-card">
|
|
798
|
+
<div class="skeleton-folder-icon pulse"></div>
|
|
799
|
+
<div class="skeleton-text-line pulse" style="width: 80%;"></div>
|
|
800
|
+
<div class="skeleton-text-line pulse short"></div>
|
|
801
|
+
</div>
|
|
802
|
+
}
|
|
803
|
+
</div>
|
|
804
|
+
}
|
|
805
|
+
</div>
|
|
806
|
+
`, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:16px;overflow:hidden;pointer-events:none}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.skeleton-text-line.full{width:100%}.skeleton-card-list{display:flex;flex-direction:column;gap:16px;width:100%}.skeleton-card{width:100%;height:120px;border-radius:12px}.skeleton-details{display:flex;flex-direction:column;gap:12px;width:100%}.skeleton-title{width:70%;height:24px;border-radius:8px;margin-bottom:16px}.skeleton-box{width:100%;height:200px;border-radius:12px;margin-top:16px}.skeleton-handbook-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}.skeleton-folder-card{display:flex;flex-direction:column;align-items:center;gap:10px}.skeleton-folder-icon{width:100%;aspect-ratio:1;border-radius:16px}.shimmer{background:#f2f4f5;background-image:linear-gradient(90deg,#fff0 0,#fff9 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}body.dark .shimmer,.dark-theme .shimmer{background:#2a2a2a;background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}.pulse{background:#f2f4f5;animation:pulse 2s infinite ease-in-out}@keyframes pulse{0%{background-color:#f2f4f5}50%{background-color:#e6e8ec}to{background-color:#f2f4f5}}body.dark .pulse,.dark-theme .pulse{background:#2a2a2a;animation:pulse-dark 2s infinite ease-in-out}@keyframes pulse-dark{0%{background-color:#2a2a2a}50%{background-color:#383838}to{background-color:#2a2a2a}}\n"] }]
|
|
807
|
+
}], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
724
808
|
|
|
725
809
|
class DsMobileCountBadgeComponent {
|
|
726
810
|
count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
|
|
@@ -800,6 +884,16 @@ class MobilePageBase {
|
|
|
800
884
|
* until they explicitly opt in.
|
|
801
885
|
*/
|
|
802
886
|
contentLoading = input(false, ...(ngDevMode ? [{ debugName: "contentLoading" }] : []));
|
|
887
|
+
/**
|
|
888
|
+
* Layout variant for the skeleton loader when contentLoading is true.
|
|
889
|
+
* - 'list': Default list layout with shimmer animation
|
|
890
|
+
* - 'card': Grid of cards with pulse animation
|
|
891
|
+
* - 'details': Detail page structure with pulse animation
|
|
892
|
+
* - 'handbook': Grid of handbook folders with pulse animation
|
|
893
|
+
*
|
|
894
|
+
* @default 'list'
|
|
895
|
+
*/
|
|
896
|
+
contentLoadingVariant = input('list', ...(ngDevMode ? [{ debugName: "contentLoadingVariant" }] : []));
|
|
803
897
|
/**
|
|
804
898
|
* Maximum content width (desktop only)
|
|
805
899
|
*
|
|
@@ -945,11 +1039,11 @@ class MobilePageBase {
|
|
|
945
1039
|
window.removeEventListener('offline', this.handleOffline);
|
|
946
1040
|
}
|
|
947
1041
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobilePageBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
948
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: MobilePageBase, isStandalone: true, inputs: { contentLoading: { classPropertyName: "contentLoading", publicName: "contentLoading", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
1042
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: MobilePageBase, isStandalone: true, inputs: { contentLoading: { classPropertyName: "contentLoading", publicName: "contentLoading", isSignal: true, isRequired: false, transformFunction: null }, contentLoadingVariant: { classPropertyName: "contentLoadingVariant", publicName: "contentLoadingVariant", isSignal: true, isRequired: false, transformFunction: null }, contentWidth: { classPropertyName: "contentWidth", publicName: "contentWidth", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
|
|
949
1043
|
}
|
|
950
1044
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobilePageBase, decorators: [{
|
|
951
1045
|
type: Directive
|
|
952
|
-
}], propDecorators: { contentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLoading", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }] } });
|
|
1046
|
+
}], propDecorators: { contentLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLoading", required: false }] }], contentLoadingVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentLoadingVariant", required: false }] }], contentWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentWidth", required: false }] }] } });
|
|
953
1047
|
|
|
954
1048
|
/**
|
|
955
1049
|
* DsMobileLongPressDirective
|
|
@@ -6211,7 +6305,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
6211
6305
|
<!-- Content wrapper -->
|
|
6212
6306
|
<div class="content-wrapper">
|
|
6213
6307
|
@if (contentLoading()) {
|
|
6214
|
-
<ds-mobile-
|
|
6308
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
|
|
6215
6309
|
}
|
|
6216
6310
|
|
|
6217
6311
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -6223,11 +6317,11 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
6223
6317
|
</div>
|
|
6224
6318
|
</div>
|
|
6225
6319
|
</ion-content>
|
|
6226
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type:
|
|
6320
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius", "variant"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
|
|
6227
6321
|
}
|
|
6228
6322
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
|
|
6229
6323
|
type: Component,
|
|
6230
|
-
args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent,
|
|
6324
|
+
args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent, DsMobileSkeletonLoaderComponent, DsMobileNotificationButtonComponent], host: {
|
|
6231
6325
|
'[style.--content-wrapper-padding]': 'contentPadding()'
|
|
6232
6326
|
}, template: `
|
|
6233
6327
|
<!-- Fixed header at top -->
|
|
@@ -6300,7 +6394,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6300
6394
|
<!-- Content wrapper -->
|
|
6301
6395
|
<div class="content-wrapper">
|
|
6302
6396
|
@if (contentLoading()) {
|
|
6303
|
-
<ds-mobile-
|
|
6397
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
|
|
6304
6398
|
}
|
|
6305
6399
|
|
|
6306
6400
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -6767,7 +6861,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
|
|
|
6767
6861
|
<!-- Content wrapper -->
|
|
6768
6862
|
<div class="content-wrapper">
|
|
6769
6863
|
@if (contentLoading()) {
|
|
6770
|
-
<ds-mobile-
|
|
6864
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
|
|
6771
6865
|
}
|
|
6772
6866
|
|
|
6773
6867
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -6778,7 +6872,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
|
|
|
6778
6872
|
</div>
|
|
6779
6873
|
</div>
|
|
6780
6874
|
</ion-content>
|
|
6781
|
-
`, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", "ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}.header-details{gap:12px;padding:0 20px;height:72px;min-height:72px}:host .header-details .back-button{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--color-header-content) 10%,transparent)!important;flex-shrink:0;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:background var(--transition-duration-fast) var(--ease-smooth);z-index:10}:host .header-details .back-button:hover{background:color-mix(in srgb,var(--color-header-content) 16%,transparent)!important}:host .header-details .back-button:active{background:color-mix(in srgb,var(--color-header-content) 22%,transparent)!important}.header-details .header-title{left:64px}@media (min-width: 768px){ion-header{display:block!important;height:88px;min-height:88px}ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}.header-details{padding:16px 24px;height:88px;min-height:88px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type:
|
|
6875
|
+
`, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", "ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}.header-details{gap:12px;padding:0 20px;height:72px;min-height:72px}:host .header-details .back-button{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--color-header-content) 10%,transparent)!important;flex-shrink:0;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:background var(--transition-duration-fast) var(--ease-smooth);z-index:10}:host .header-details .back-button:hover{background:color-mix(in srgb,var(--color-header-content) 16%,transparent)!important}:host .header-details .back-button:active{background:color-mix(in srgb,var(--color-header-content) 22%,transparent)!important}.header-details .header-title{left:64px}@media (min-width: 768px){ion-header{display:block!important;height:88px;min-height:88px}ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}.header-details{padding:16px 24px;height:88px;min-height:88px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius", "variant"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
|
|
6782
6876
|
}
|
|
6783
6877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageDetailsComponent, decorators: [{
|
|
6784
6878
|
type: Component,
|
|
@@ -6791,7 +6885,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6791
6885
|
IonRefresher,
|
|
6792
6886
|
IonRefresherContent,
|
|
6793
6887
|
DsIconComponent,
|
|
6794
|
-
|
|
6888
|
+
DsMobileSkeletonLoaderComponent,
|
|
6795
6889
|
DsMobileInlineTabsComponent
|
|
6796
6890
|
], host: {
|
|
6797
6891
|
'[style.--content-wrapper-padding]': 'contentPadding()'
|
|
@@ -6860,7 +6954,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6860
6954
|
<!-- Content wrapper -->
|
|
6861
6955
|
<div class="content-wrapper">
|
|
6862
6956
|
@if (contentLoading()) {
|
|
6863
|
-
<ds-mobile-
|
|
6957
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" [variant]="contentLoadingVariant()" />
|
|
6864
6958
|
}
|
|
6865
6959
|
|
|
6866
6960
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -7931,6 +8025,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7931
8025
|
`, styles: [":host{display:block;max-width:640px;cursor:pointer;transition:all .2s ease}.composer-container{display:flex;align-items:center;gap:12px}.composer-input-wrapper{flex:1;min-width:0}.composer-input{width:100%;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1);border:none;border-radius:24px;padding:10px 16px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.75);outline:none;cursor:pointer;transition:all .2s ease;pointer-events:none;-webkit-user-select:none;user-select:none}.composer-input::placeholder{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.75);opacity:1}@media (hover: hover){:host:hover .composer-input{opacity:.8}}\n"] }]
|
|
7932
8026
|
}], propDecorators: { avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconName", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], composerClick: [{ type: i0.Output, args: ["composerClick"] }] } });
|
|
7933
8027
|
|
|
8028
|
+
/**
|
|
8029
|
+
* DsMobileGlassSpinnerComponent
|
|
8030
|
+
*
|
|
8031
|
+
* Reusable loader overlay with a glassmorphism (blurred) background and a spinner.
|
|
8032
|
+
* This is useful when you want to show a loading state without covering the entire screen
|
|
8033
|
+
* with a solid background, but rather blurring the content behind it.
|
|
8034
|
+
*
|
|
8035
|
+
* Features:
|
|
8036
|
+
* - Glassmorphism blurred background
|
|
8037
|
+
* - Centered animated spinner
|
|
8038
|
+
* - Customizable spinner size
|
|
8039
|
+
* - Absolute positioning to cover parent
|
|
8040
|
+
*/
|
|
8041
|
+
class DsMobileGlassSpinnerComponent {
|
|
8042
|
+
/**
|
|
8043
|
+
* Size of the spinner in pixels
|
|
8044
|
+
* @default 24
|
|
8045
|
+
*/
|
|
8046
|
+
spinnerSize = input(24, ...(ngDevMode ? [{ debugName: "spinnerSize" }] : []));
|
|
8047
|
+
/**
|
|
8048
|
+
* Border radius of the overlay in pixels (should match parent's border radius)
|
|
8049
|
+
* @default 0
|
|
8050
|
+
*/
|
|
8051
|
+
borderRadius = input(0, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
|
|
8052
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8053
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileGlassSpinnerComponent, isStandalone: true, selector: "ds-mobile-glass-spinner", inputs: { spinnerSize: { classPropertyName: "spinnerSize", publicName: "spinnerSize", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
|
|
8054
|
+
<div
|
|
8055
|
+
class="glass-spinner-overlay"
|
|
8056
|
+
[style.border-radius.px]="borderRadius()"
|
|
8057
|
+
role="status"
|
|
8058
|
+
aria-live="polite"
|
|
8059
|
+
aria-label="Loading">
|
|
8060
|
+
<div
|
|
8061
|
+
class="spinner"
|
|
8062
|
+
[style.width.px]="spinnerSize()"
|
|
8063
|
+
[style.height.px]="spinnerSize()">
|
|
8064
|
+
</div>
|
|
8065
|
+
</div>
|
|
8066
|
+
`, isInline: true, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
8067
|
+
}
|
|
8068
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, decorators: [{
|
|
8069
|
+
type: Component,
|
|
8070
|
+
args: [{ selector: 'ds-mobile-glass-spinner', standalone: true, imports: [CommonModule], template: `
|
|
8071
|
+
<div
|
|
8072
|
+
class="glass-spinner-overlay"
|
|
8073
|
+
[style.border-radius.px]="borderRadius()"
|
|
8074
|
+
role="status"
|
|
8075
|
+
aria-live="polite"
|
|
8076
|
+
aria-label="Loading">
|
|
8077
|
+
<div
|
|
8078
|
+
class="spinner"
|
|
8079
|
+
[style.width.px]="spinnerSize()"
|
|
8080
|
+
[style.height.px]="spinnerSize()">
|
|
8081
|
+
</div>
|
|
8082
|
+
</div>
|
|
8083
|
+
`, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"] }]
|
|
8084
|
+
}], propDecorators: { spinnerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerSize", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
|
|
8085
|
+
|
|
7934
8086
|
/**
|
|
7935
8087
|
* DsMobileAttachmentPreviewComponent
|
|
7936
8088
|
*
|