@propbinder/mobile-design 0.3.39 → 0.3.40
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,69 @@ 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
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type:
|
|
692
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
693
|
-
<div
|
|
694
|
-
class="
|
|
695
|
-
[style.border-radius.px]="borderRadius()"
|
|
696
|
-
role="status"
|
|
697
|
-
aria-live="polite"
|
|
698
|
-
aria-label="Loading">
|
|
699
|
-
<div
|
|
700
|
-
|
|
701
|
-
[
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
684
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
685
|
+
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 } }, ngImport: i0, template: `
|
|
686
|
+
<div
|
|
687
|
+
class="skeleton-loader-overlay"
|
|
688
|
+
[style.border-radius.px]="borderRadius()"
|
|
689
|
+
role="status"
|
|
690
|
+
aria-live="polite"
|
|
691
|
+
aria-label="Loading">
|
|
692
|
+
<div class="skeleton-list">
|
|
693
|
+
<!-- Generate 4 skeleton rows to mimic a generic list -->
|
|
694
|
+
@for (i of [1, 2, 3, 4]; track i) {
|
|
695
|
+
<div class="skeleton-item">
|
|
696
|
+
<div class="skeleton-avatar shimmer"></div>
|
|
697
|
+
<div class="skeleton-text-container">
|
|
698
|
+
<div class="skeleton-text-line shimmer"></div>
|
|
699
|
+
<div class="skeleton-text-line shimmer short"></div>
|
|
700
|
+
</div>
|
|
701
|
+
</div>
|
|
702
|
+
}
|
|
703
|
+
</div>
|
|
704
|
+
</div>
|
|
705
|
+
`, 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%}.shimmer{background:var(--color-background-tertiary, #f0f0f0);background-image:linear-gradient(90deg,#fff0 0,#ffffff80 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}}@media (prefers-color-scheme: dark){.shimmer{background:var(--color-background-tertiary-dark, #2a2a2a);background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
|
|
706
706
|
}
|
|
707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type:
|
|
707
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, decorators: [{
|
|
708
708
|
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
|
-
<div
|
|
717
|
-
|
|
718
|
-
[
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
709
|
+
args: [{ selector: 'ds-mobile-skeleton-loader', standalone: true, imports: [CommonModule], template: `
|
|
710
|
+
<div
|
|
711
|
+
class="skeleton-loader-overlay"
|
|
712
|
+
[style.border-radius.px]="borderRadius()"
|
|
713
|
+
role="status"
|
|
714
|
+
aria-live="polite"
|
|
715
|
+
aria-label="Loading">
|
|
716
|
+
<div class="skeleton-list">
|
|
717
|
+
<!-- Generate 4 skeleton rows to mimic a generic list -->
|
|
718
|
+
@for (i of [1, 2, 3, 4]; track i) {
|
|
719
|
+
<div class="skeleton-item">
|
|
720
|
+
<div class="skeleton-avatar shimmer"></div>
|
|
721
|
+
<div class="skeleton-text-container">
|
|
722
|
+
<div class="skeleton-text-line shimmer"></div>
|
|
723
|
+
<div class="skeleton-text-line shimmer short"></div>
|
|
724
|
+
</div>
|
|
725
|
+
</div>
|
|
726
|
+
}
|
|
727
|
+
</div>
|
|
728
|
+
</div>
|
|
729
|
+
`, 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%}.shimmer{background:var(--color-background-tertiary, #f0f0f0);background-image:linear-gradient(90deg,#fff0 0,#ffffff80 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}}@media (prefers-color-scheme: dark){.shimmer{background:var(--color-background-tertiary-dark, #2a2a2a);background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}}\n"] }]
|
|
730
|
+
}], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
|
|
724
731
|
|
|
725
732
|
class DsMobileCountBadgeComponent {
|
|
726
733
|
count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
|
|
@@ -6211,7 +6218,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
6211
6218
|
<!-- Content wrapper -->
|
|
6212
6219
|
<div class="content-wrapper">
|
|
6213
6220
|
@if (contentLoading()) {
|
|
6214
|
-
<ds-mobile-
|
|
6221
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" />
|
|
6215
6222
|
}
|
|
6216
6223
|
|
|
6217
6224
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -6223,11 +6230,11 @@ class DsMobilePageMainComponent extends MobilePageBase {
|
|
|
6223
6230
|
</div>
|
|
6224
6231
|
</div>
|
|
6225
6232
|
</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:
|
|
6233
|
+
`, 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"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
|
|
6227
6234
|
}
|
|
6228
6235
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
|
|
6229
6236
|
type: Component,
|
|
6230
|
-
args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent,
|
|
6237
|
+
args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent, DsMobileSkeletonLoaderComponent, DsMobileNotificationButtonComponent], host: {
|
|
6231
6238
|
'[style.--content-wrapper-padding]': 'contentPadding()'
|
|
6232
6239
|
}, template: `
|
|
6233
6240
|
<!-- Fixed header at top -->
|
|
@@ -6300,7 +6307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6300
6307
|
<!-- Content wrapper -->
|
|
6301
6308
|
<div class="content-wrapper">
|
|
6302
6309
|
@if (contentLoading()) {
|
|
6303
|
-
<ds-mobile-
|
|
6310
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" />
|
|
6304
6311
|
}
|
|
6305
6312
|
|
|
6306
6313
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -6767,7 +6774,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
|
|
|
6767
6774
|
<!-- Content wrapper -->
|
|
6768
6775
|
<div class="content-wrapper">
|
|
6769
6776
|
@if (contentLoading()) {
|
|
6770
|
-
<ds-mobile-
|
|
6777
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" />
|
|
6771
6778
|
}
|
|
6772
6779
|
|
|
6773
6780
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -6778,7 +6785,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
|
|
|
6778
6785
|
</div>
|
|
6779
6786
|
</div>
|
|
6780
6787
|
</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:
|
|
6788
|
+
`, 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"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
|
|
6782
6789
|
}
|
|
6783
6790
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageDetailsComponent, decorators: [{
|
|
6784
6791
|
type: Component,
|
|
@@ -6791,7 +6798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6791
6798
|
IonRefresher,
|
|
6792
6799
|
IonRefresherContent,
|
|
6793
6800
|
DsIconComponent,
|
|
6794
|
-
|
|
6801
|
+
DsMobileSkeletonLoaderComponent,
|
|
6795
6802
|
DsMobileInlineTabsComponent
|
|
6796
6803
|
], host: {
|
|
6797
6804
|
'[style.--content-wrapper-padding]': 'contentPadding()'
|
|
@@ -6860,7 +6867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
6860
6867
|
<!-- Content wrapper -->
|
|
6861
6868
|
<div class="content-wrapper">
|
|
6862
6869
|
@if (contentLoading()) {
|
|
6863
|
-
<ds-mobile-
|
|
6870
|
+
<ds-mobile-skeleton-loader [borderRadius]="24" />
|
|
6864
6871
|
}
|
|
6865
6872
|
|
|
6866
6873
|
<!-- Offline indicator slot (appears at top of content) -->
|
|
@@ -7931,6 +7938,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
7931
7938
|
`, 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
7939
|
}], 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
7940
|
|
|
7941
|
+
/**
|
|
7942
|
+
* DsMobileGlassSpinnerComponent
|
|
7943
|
+
*
|
|
7944
|
+
* Reusable loader overlay with a glassmorphism (blurred) background and a spinner.
|
|
7945
|
+
* This is useful when you want to show a loading state without covering the entire screen
|
|
7946
|
+
* with a solid background, but rather blurring the content behind it.
|
|
7947
|
+
*
|
|
7948
|
+
* Features:
|
|
7949
|
+
* - Glassmorphism blurred background
|
|
7950
|
+
* - Centered animated spinner
|
|
7951
|
+
* - Customizable spinner size
|
|
7952
|
+
* - Absolute positioning to cover parent
|
|
7953
|
+
*/
|
|
7954
|
+
class DsMobileGlassSpinnerComponent {
|
|
7955
|
+
/**
|
|
7956
|
+
* Size of the spinner in pixels
|
|
7957
|
+
* @default 24
|
|
7958
|
+
*/
|
|
7959
|
+
spinnerSize = input(24, ...(ngDevMode ? [{ debugName: "spinnerSize" }] : []));
|
|
7960
|
+
/**
|
|
7961
|
+
* Border radius of the overlay in pixels (should match parent's border radius)
|
|
7962
|
+
* @default 0
|
|
7963
|
+
*/
|
|
7964
|
+
borderRadius = input(0, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
|
|
7965
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7966
|
+
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: `
|
|
7967
|
+
<div
|
|
7968
|
+
class="glass-spinner-overlay"
|
|
7969
|
+
[style.border-radius.px]="borderRadius()"
|
|
7970
|
+
role="status"
|
|
7971
|
+
aria-live="polite"
|
|
7972
|
+
aria-label="Loading">
|
|
7973
|
+
<div
|
|
7974
|
+
class="spinner"
|
|
7975
|
+
[style.width.px]="spinnerSize()"
|
|
7976
|
+
[style.height.px]="spinnerSize()">
|
|
7977
|
+
</div>
|
|
7978
|
+
</div>
|
|
7979
|
+
`, 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 }] });
|
|
7980
|
+
}
|
|
7981
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, decorators: [{
|
|
7982
|
+
type: Component,
|
|
7983
|
+
args: [{ selector: 'ds-mobile-glass-spinner', standalone: true, imports: [CommonModule], template: `
|
|
7984
|
+
<div
|
|
7985
|
+
class="glass-spinner-overlay"
|
|
7986
|
+
[style.border-radius.px]="borderRadius()"
|
|
7987
|
+
role="status"
|
|
7988
|
+
aria-live="polite"
|
|
7989
|
+
aria-label="Loading">
|
|
7990
|
+
<div
|
|
7991
|
+
class="spinner"
|
|
7992
|
+
[style.width.px]="spinnerSize()"
|
|
7993
|
+
[style.height.px]="spinnerSize()">
|
|
7994
|
+
</div>
|
|
7995
|
+
</div>
|
|
7996
|
+
`, 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"] }]
|
|
7997
|
+
}], propDecorators: { spinnerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerSize", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
|
|
7998
|
+
|
|
7934
7999
|
/**
|
|
7935
8000
|
* DsMobileAttachmentPreviewComponent
|
|
7936
8001
|
*
|