@propbinder/mobile-design 0.2.86 → 0.2.88
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.
|
@@ -17,7 +17,7 @@ import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
|
17
17
|
import { Capacitor } from '@capacitor/core';
|
|
18
18
|
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
|
|
19
19
|
import { FilePicker } from '@capawesome/capacitor-file-picker';
|
|
20
|
-
import { Subject } from 'rxjs';
|
|
20
|
+
import { Subject, isObservable } from 'rxjs';
|
|
21
21
|
import { createAnimation } from '@ionic/core';
|
|
22
22
|
import { Share } from '@capacitor/share';
|
|
23
23
|
import Swiper from 'swiper';
|
|
@@ -14582,7 +14582,7 @@ class DsMobileLightboxImageComponent {
|
|
|
14582
14582
|
/>
|
|
14583
14583
|
</div>
|
|
14584
14584
|
</div>
|
|
14585
|
-
`, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"], dependencies: [{ kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author", "showDownload"], outputs: ["closeClick", "shareClick", "downloadClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }] });
|
|
14585
|
+
`, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.header-title{display:flex;align-items:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.header-title ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.icon-btn{background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;cursor:pointer;margin:-4px -4px -4px 0;transition:opacity .2s}.icon-btn:active{opacity:.7}.icon-btn ds-icon::ng-deep svg{fill:#6b7280}.ai-description-minimized{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm);cursor:pointer;padding:4px 0}.ai-description-minimized ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author", "showDownload"], outputs: ["closeClick", "shareClick", "downloadClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }] });
|
|
14586
14586
|
}
|
|
14587
14587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageComponent, decorators: [{
|
|
14588
14588
|
type: Component,
|
|
@@ -14646,12 +14646,610 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
14646
14646
|
/>
|
|
14647
14647
|
</div>
|
|
14648
14648
|
</div>
|
|
14649
|
-
`, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}\n"] }]
|
|
14649
|
+
`, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.header-title{display:flex;align-items:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.header-title ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.icon-btn{background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;cursor:pointer;margin:-4px -4px -4px 0;transition:opacity .2s}.icon-btn:active{opacity:.7}.icon-btn ds-icon::ng-deep svg{fill:#6b7280}.ai-description-minimized{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm);cursor:pointer;padding:4px 0}.ai-description-minimized ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"] }]
|
|
14650
14650
|
}], ctorParameters: () => [{ type: i1.GestureController }], propDecorators: { swiperContainer: [{
|
|
14651
14651
|
type: ViewChild,
|
|
14652
14652
|
args: ['swiperContainer', { read: ElementRef }]
|
|
14653
14653
|
}] } });
|
|
14654
14654
|
|
|
14655
|
+
/**
|
|
14656
|
+
* DsMobileLightboxImageWithDescriptionComponent
|
|
14657
|
+
*
|
|
14658
|
+
* Full-screen image lightbox component with Swiper.js navigation, pinch-zoom, and AI descriptions.
|
|
14659
|
+
*/
|
|
14660
|
+
class DsMobileLightboxImageWithDescriptionComponent {
|
|
14661
|
+
gestureCtrl;
|
|
14662
|
+
images = [];
|
|
14663
|
+
author;
|
|
14664
|
+
initialIndex = 0;
|
|
14665
|
+
enableZoom = true;
|
|
14666
|
+
showControls = true;
|
|
14667
|
+
enableSwipe = true;
|
|
14668
|
+
showInfo = true;
|
|
14669
|
+
showActions = false;
|
|
14670
|
+
showDownload = false;
|
|
14671
|
+
onDownload;
|
|
14672
|
+
animation = 'fade';
|
|
14673
|
+
onCloseRequested;
|
|
14674
|
+
swiperContainer;
|
|
14675
|
+
currentIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentIndex" }] : []));
|
|
14676
|
+
isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
14677
|
+
isZoomed = signal(false, ...(ngDevMode ? [{ debugName: "isZoomed" }] : []));
|
|
14678
|
+
isSwiping = signal(false, ...(ngDevMode ? [{ debugName: "isSwiping" }] : []));
|
|
14679
|
+
isLiked = signal(false, ...(ngDevMode ? [{ debugName: "isLiked" }] : []));
|
|
14680
|
+
likeCount = signal(0, ...(ngDevMode ? [{ debugName: "likeCount" }] : []));
|
|
14681
|
+
commentCount = signal(0, ...(ngDevMode ? [{ debugName: "commentCount" }] : []));
|
|
14682
|
+
descriptionText = signal(null, ...(ngDevMode ? [{ debugName: "descriptionText" }] : []));
|
|
14683
|
+
descriptionError = signal(false, ...(ngDevMode ? [{ debugName: "descriptionError" }] : []));
|
|
14684
|
+
isDescriptionMinimized = signal(false, ...(ngDevMode ? [{ debugName: "isDescriptionMinimized" }] : []));
|
|
14685
|
+
hasError = signal(false, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
|
|
14686
|
+
descriptionSubscription;
|
|
14687
|
+
// Computed
|
|
14688
|
+
currentImage = computed(() => this.images[this.currentIndex()], ...(ngDevMode ? [{ debugName: "currentImage" }] : []));
|
|
14689
|
+
swiper;
|
|
14690
|
+
zoomData = new Map();
|
|
14691
|
+
constructor(gestureCtrl) {
|
|
14692
|
+
this.gestureCtrl = gestureCtrl;
|
|
14693
|
+
}
|
|
14694
|
+
ngOnInit() {
|
|
14695
|
+
// Set initial index from the passed property
|
|
14696
|
+
if (this.initialIndex !== undefined) {
|
|
14697
|
+
this.currentIndex.set(this.initialIndex);
|
|
14698
|
+
}
|
|
14699
|
+
// Initialize action states from current image
|
|
14700
|
+
const currentImg = this.images[this.currentIndex()];
|
|
14701
|
+
if (currentImg) {
|
|
14702
|
+
this.isLiked.set(currentImg.isLiked ?? false);
|
|
14703
|
+
this.likeCount.set(currentImg.likeCount ?? 0);
|
|
14704
|
+
this.commentCount.set(currentImg.commentCount ?? 0);
|
|
14705
|
+
}
|
|
14706
|
+
// Load description for initial image
|
|
14707
|
+
this.loadDescription(this.currentIndex());
|
|
14708
|
+
}
|
|
14709
|
+
ngAfterViewInit() {
|
|
14710
|
+
setTimeout(() => {
|
|
14711
|
+
this.initializeSwiper();
|
|
14712
|
+
this.initializeZoomGestures();
|
|
14713
|
+
}, 100);
|
|
14714
|
+
}
|
|
14715
|
+
ngOnDestroy() {
|
|
14716
|
+
// Clean up Swiper
|
|
14717
|
+
if (this.swiper) {
|
|
14718
|
+
this.swiper.destroy();
|
|
14719
|
+
this.swiper = undefined;
|
|
14720
|
+
}
|
|
14721
|
+
}
|
|
14722
|
+
/**
|
|
14723
|
+
* Initialize Swiper for image navigation
|
|
14724
|
+
*/
|
|
14725
|
+
initializeSwiper() {
|
|
14726
|
+
if (!this.swiperContainer) {
|
|
14727
|
+
console.error('[Lightbox] Swiper container not found');
|
|
14728
|
+
return;
|
|
14729
|
+
}
|
|
14730
|
+
const swiperOptions = {
|
|
14731
|
+
initialSlide: this.initialIndex,
|
|
14732
|
+
speed: 300,
|
|
14733
|
+
resistance: true,
|
|
14734
|
+
resistanceRatio: 0.85,
|
|
14735
|
+
slidesPerView: 1,
|
|
14736
|
+
spaceBetween: 0,
|
|
14737
|
+
touchRatio: 1,
|
|
14738
|
+
longSwipesRatio: 0.5,
|
|
14739
|
+
threshold: 10,
|
|
14740
|
+
on: {
|
|
14741
|
+
slideChange: (swiper) => {
|
|
14742
|
+
this.currentIndex.set(swiper.activeIndex);
|
|
14743
|
+
this.updateActionStates();
|
|
14744
|
+
this.loadDescription(swiper.activeIndex);
|
|
14745
|
+
// Check if the image is already loaded
|
|
14746
|
+
const currentSlide = swiper.slides[swiper.activeIndex];
|
|
14747
|
+
const img = currentSlide?.querySelector('img');
|
|
14748
|
+
if (img && img.complete && img.naturalHeight !== 0) {
|
|
14749
|
+
// Image is already loaded
|
|
14750
|
+
this.isLoading.set(false);
|
|
14751
|
+
}
|
|
14752
|
+
},
|
|
14753
|
+
slideChangeTransitionStart: () => {
|
|
14754
|
+
// Don't show loading spinner if image is already loaded
|
|
14755
|
+
const currentSlide = this.swiper?.slides[this.swiper.activeIndex];
|
|
14756
|
+
const img = currentSlide?.querySelector('img');
|
|
14757
|
+
if (!img || !img.complete || img.naturalHeight === 0) {
|
|
14758
|
+
this.isLoading.set(true);
|
|
14759
|
+
}
|
|
14760
|
+
}
|
|
14761
|
+
}
|
|
14762
|
+
};
|
|
14763
|
+
this.swiper = new Swiper(this.swiperContainer.nativeElement, swiperOptions);
|
|
14764
|
+
// Check if the initial image is already loaded
|
|
14765
|
+
setTimeout(() => {
|
|
14766
|
+
const currentSlide = this.swiper?.slides[this.currentIndex()];
|
|
14767
|
+
const img = currentSlide?.querySelector('img');
|
|
14768
|
+
if (img && img.complete && img.naturalHeight !== 0) {
|
|
14769
|
+
this.isLoading.set(false);
|
|
14770
|
+
}
|
|
14771
|
+
}, 0);
|
|
14772
|
+
}
|
|
14773
|
+
/**
|
|
14774
|
+
* Initialize pinch-zoom gestures for all slides
|
|
14775
|
+
*/
|
|
14776
|
+
initializeZoomGestures() {
|
|
14777
|
+
if (!this.enableZoom)
|
|
14778
|
+
return;
|
|
14779
|
+
const slides = this.swiperContainer.nativeElement.querySelectorAll('.image-zoom-container');
|
|
14780
|
+
slides.forEach((slide, index) => {
|
|
14781
|
+
this.initializeZoomForSlide(slide, index);
|
|
14782
|
+
});
|
|
14783
|
+
}
|
|
14784
|
+
/**
|
|
14785
|
+
* Initialize zoom gestures for a specific slide
|
|
14786
|
+
*/
|
|
14787
|
+
initializeZoomForSlide(container, index) {
|
|
14788
|
+
let initialDistance = 0;
|
|
14789
|
+
let initialScale = 1;
|
|
14790
|
+
let currentScale = 1;
|
|
14791
|
+
let lastTap = 0;
|
|
14792
|
+
// Double-tap to zoom
|
|
14793
|
+
container.addEventListener('click', (event) => {
|
|
14794
|
+
const now = Date.now();
|
|
14795
|
+
const timeSinceLastTap = now - lastTap;
|
|
14796
|
+
if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
|
|
14797
|
+
event.preventDefault();
|
|
14798
|
+
this.toggleZoom(container, index);
|
|
14799
|
+
}
|
|
14800
|
+
lastTap = now;
|
|
14801
|
+
});
|
|
14802
|
+
// Pinch to zoom
|
|
14803
|
+
const getTouchDistance = (touches) => {
|
|
14804
|
+
const dx = touches[0].clientX - touches[1].clientX;
|
|
14805
|
+
const dy = touches[0].clientY - touches[1].clientY;
|
|
14806
|
+
return Math.sqrt(dx * dx + dy * dy);
|
|
14807
|
+
};
|
|
14808
|
+
container.addEventListener('touchstart', (event) => {
|
|
14809
|
+
if (event.touches.length === 2) {
|
|
14810
|
+
event.preventDefault();
|
|
14811
|
+
initialDistance = getTouchDistance(event.touches);
|
|
14812
|
+
const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
|
|
14813
|
+
initialScale = zoomData.scale;
|
|
14814
|
+
// Disable Swiper when zooming
|
|
14815
|
+
if (this.swiper) {
|
|
14816
|
+
this.swiper.allowTouchMove = false;
|
|
14817
|
+
}
|
|
14818
|
+
}
|
|
14819
|
+
}, { passive: false });
|
|
14820
|
+
container.addEventListener('touchmove', (event) => {
|
|
14821
|
+
if (event.touches.length === 2) {
|
|
14822
|
+
event.preventDefault();
|
|
14823
|
+
const currentDistance = getTouchDistance(event.touches);
|
|
14824
|
+
const pinchScale = currentDistance / initialDistance;
|
|
14825
|
+
currentScale = Math.max(1, Math.min(initialScale * pinchScale, 4));
|
|
14826
|
+
const img = container.querySelector('img');
|
|
14827
|
+
if (img) {
|
|
14828
|
+
img.style.transform = `scale(${currentScale})`;
|
|
14829
|
+
}
|
|
14830
|
+
if (currentScale > 1) {
|
|
14831
|
+
this.isZoomed.set(true);
|
|
14832
|
+
}
|
|
14833
|
+
else {
|
|
14834
|
+
this.isZoomed.set(false);
|
|
14835
|
+
}
|
|
14836
|
+
}
|
|
14837
|
+
}, { passive: false });
|
|
14838
|
+
container.addEventListener('touchend', (event) => {
|
|
14839
|
+
if (event.touches.length < 2) {
|
|
14840
|
+
// Save zoom state
|
|
14841
|
+
this.zoomData.set(index, { scale: currentScale, x: 0, y: 0 });
|
|
14842
|
+
// Re-enable Swiper if not zoomed
|
|
14843
|
+
if (this.swiper && currentScale <= 1) {
|
|
14844
|
+
this.swiper.allowTouchMove = true;
|
|
14845
|
+
}
|
|
14846
|
+
}
|
|
14847
|
+
});
|
|
14848
|
+
}
|
|
14849
|
+
/**
|
|
14850
|
+
* Toggle zoom on double-tap
|
|
14851
|
+
*/
|
|
14852
|
+
toggleZoom(container, index) {
|
|
14853
|
+
const zoomData = this.zoomData.get(index) || { scale: 1, x: 0, y: 0 };
|
|
14854
|
+
const img = container.querySelector('img');
|
|
14855
|
+
if (!img)
|
|
14856
|
+
return;
|
|
14857
|
+
if (zoomData.scale > 1) {
|
|
14858
|
+
// Zoom out
|
|
14859
|
+
img.style.transform = 'scale(1)';
|
|
14860
|
+
this.zoomData.set(index, { scale: 1, x: 0, y: 0 });
|
|
14861
|
+
this.isZoomed.set(false);
|
|
14862
|
+
if (this.swiper) {
|
|
14863
|
+
this.swiper.allowTouchMove = true;
|
|
14864
|
+
}
|
|
14865
|
+
}
|
|
14866
|
+
else {
|
|
14867
|
+
// Zoom in
|
|
14868
|
+
img.style.transform = 'scale(2)';
|
|
14869
|
+
this.zoomData.set(index, { scale: 2, x: 0, y: 0 });
|
|
14870
|
+
this.isZoomed.set(true);
|
|
14871
|
+
if (this.swiper) {
|
|
14872
|
+
this.swiper.allowTouchMove = false;
|
|
14873
|
+
}
|
|
14874
|
+
}
|
|
14875
|
+
}
|
|
14876
|
+
/**
|
|
14877
|
+
* Update action states (like, comments) when slide changes
|
|
14878
|
+
*/
|
|
14879
|
+
updateActionStates() {
|
|
14880
|
+
const currentImg = this.images[this.currentIndex()];
|
|
14881
|
+
if (currentImg) {
|
|
14882
|
+
this.isLiked.set(currentImg.isLiked ?? false);
|
|
14883
|
+
this.likeCount.set(currentImg.likeCount ?? 0);
|
|
14884
|
+
this.commentCount.set(currentImg.commentCount ?? 0);
|
|
14885
|
+
}
|
|
14886
|
+
}
|
|
14887
|
+
/**
|
|
14888
|
+
* Close the lightbox
|
|
14889
|
+
*/
|
|
14890
|
+
close() {
|
|
14891
|
+
if (this.onCloseRequested) {
|
|
14892
|
+
this.onCloseRequested();
|
|
14893
|
+
}
|
|
14894
|
+
}
|
|
14895
|
+
/**
|
|
14896
|
+
* Load description for the current slide
|
|
14897
|
+
*/
|
|
14898
|
+
async loadDescription(index) {
|
|
14899
|
+
const currentImg = this.images[index];
|
|
14900
|
+
// Reset state
|
|
14901
|
+
this.descriptionText.set(null);
|
|
14902
|
+
this.descriptionError.set(false);
|
|
14903
|
+
this.isDescriptionMinimized.set(false);
|
|
14904
|
+
if (this.descriptionSubscription) {
|
|
14905
|
+
this.descriptionSubscription.unsubscribe();
|
|
14906
|
+
this.descriptionSubscription = undefined;
|
|
14907
|
+
}
|
|
14908
|
+
if (!currentImg || !currentImg.lazyDescription) {
|
|
14909
|
+
return;
|
|
14910
|
+
}
|
|
14911
|
+
try {
|
|
14912
|
+
const result = currentImg.lazyDescription();
|
|
14913
|
+
if (isObservable(result)) {
|
|
14914
|
+
this.descriptionSubscription = result.subscribe({
|
|
14915
|
+
next: (text) => {
|
|
14916
|
+
this.descriptionText.set(text);
|
|
14917
|
+
},
|
|
14918
|
+
error: (err) => {
|
|
14919
|
+
console.error('[Lightbox] Failed to load description via observable', err);
|
|
14920
|
+
this.descriptionError.set(true);
|
|
14921
|
+
}
|
|
14922
|
+
});
|
|
14923
|
+
}
|
|
14924
|
+
else {
|
|
14925
|
+
const text = await result;
|
|
14926
|
+
// Verify index is still the same after await
|
|
14927
|
+
if (this.currentIndex() === index) {
|
|
14928
|
+
this.descriptionText.set(text);
|
|
14929
|
+
}
|
|
14930
|
+
}
|
|
14931
|
+
}
|
|
14932
|
+
catch (err) {
|
|
14933
|
+
console.error('[Lightbox] Failed to load description', err);
|
|
14934
|
+
if (this.currentIndex() === index) {
|
|
14935
|
+
this.descriptionError.set(true);
|
|
14936
|
+
}
|
|
14937
|
+
}
|
|
14938
|
+
}
|
|
14939
|
+
/**
|
|
14940
|
+
* Handle share button click
|
|
14941
|
+
*/
|
|
14942
|
+
async onShare() {
|
|
14943
|
+
console.log('[Lightbox] Share button clicked');
|
|
14944
|
+
const currentImg = this.currentImage();
|
|
14945
|
+
if (!currentImg?.src) {
|
|
14946
|
+
console.warn('[Lightbox] No image to share');
|
|
14947
|
+
return;
|
|
14948
|
+
}
|
|
14949
|
+
try {
|
|
14950
|
+
// Check if Web Share API is available (for browser)
|
|
14951
|
+
if (navigator.share) {
|
|
14952
|
+
await navigator.share({
|
|
14953
|
+
title: currentImg.title || 'Shared Image',
|
|
14954
|
+
text: currentImg.description || '',
|
|
14955
|
+
url: currentImg.src,
|
|
14956
|
+
});
|
|
14957
|
+
console.log('[Lightbox] Shared via Web Share API');
|
|
14958
|
+
}
|
|
14959
|
+
else {
|
|
14960
|
+
// Fallback to Capacitor Share API (for native apps)
|
|
14961
|
+
await Share.share({
|
|
14962
|
+
title: currentImg.title || 'Shared Image',
|
|
14963
|
+
url: currentImg.src,
|
|
14964
|
+
dialogTitle: 'Share Image',
|
|
14965
|
+
});
|
|
14966
|
+
console.log('[Lightbox] Shared via Capacitor Share API');
|
|
14967
|
+
}
|
|
14968
|
+
}
|
|
14969
|
+
catch (error) {
|
|
14970
|
+
// User cancellation is expected and not an error
|
|
14971
|
+
if (error?.message?.includes('cancel') || error?.code === 'USER_CANCELLED') {
|
|
14972
|
+
console.log('[Lightbox] Share cancelled by user');
|
|
14973
|
+
return;
|
|
14974
|
+
}
|
|
14975
|
+
console.error('[Lightbox] Share failed:', error);
|
|
14976
|
+
}
|
|
14977
|
+
}
|
|
14978
|
+
/**
|
|
14979
|
+
* Handle download action
|
|
14980
|
+
*/
|
|
14981
|
+
onDownloadAction() {
|
|
14982
|
+
console.log('[Lightbox] Download button clicked');
|
|
14983
|
+
const currentImg = this.currentImage();
|
|
14984
|
+
if (!currentImg?.src) {
|
|
14985
|
+
console.warn('[Lightbox] No image to download');
|
|
14986
|
+
return;
|
|
14987
|
+
}
|
|
14988
|
+
if (this.onDownload) {
|
|
14989
|
+
this.onDownload(currentImg);
|
|
14990
|
+
}
|
|
14991
|
+
}
|
|
14992
|
+
/**
|
|
14993
|
+
* Handle like button toggle
|
|
14994
|
+
*/
|
|
14995
|
+
onLikeToggle() {
|
|
14996
|
+
console.log('[Lightbox] Like button toggled');
|
|
14997
|
+
this.isLiked.update(liked => !liked);
|
|
14998
|
+
if (this.isLiked()) {
|
|
14999
|
+
this.likeCount.update(count => count + 1);
|
|
15000
|
+
}
|
|
15001
|
+
else {
|
|
15002
|
+
this.likeCount.update(count => Math.max(0, count - 1));
|
|
15003
|
+
}
|
|
15004
|
+
}
|
|
15005
|
+
/**
|
|
15006
|
+
* Handle reply/comment button click
|
|
15007
|
+
*/
|
|
15008
|
+
onReply() {
|
|
15009
|
+
console.log('[Lightbox] Reply button clicked');
|
|
15010
|
+
if (this.onCloseRequested) {
|
|
15011
|
+
this.onCloseRequested();
|
|
15012
|
+
}
|
|
15013
|
+
}
|
|
15014
|
+
/**
|
|
15015
|
+
* Navigate to the next image
|
|
15016
|
+
*/
|
|
15017
|
+
nextImage() {
|
|
15018
|
+
if (this.swiper && this.currentIndex() < this.images.length - 1) {
|
|
15019
|
+
this.swiper.slideNext();
|
|
15020
|
+
}
|
|
15021
|
+
}
|
|
15022
|
+
/**
|
|
15023
|
+
* Navigate to the previous image
|
|
15024
|
+
*/
|
|
15025
|
+
previousImage() {
|
|
15026
|
+
if (this.swiper && this.currentIndex() > 0) {
|
|
15027
|
+
this.swiper.slidePrev();
|
|
15028
|
+
}
|
|
15029
|
+
}
|
|
15030
|
+
/**
|
|
15031
|
+
* Handle image load success
|
|
15032
|
+
*/
|
|
15033
|
+
onImageLoad(index) {
|
|
15034
|
+
if (index === this.currentIndex()) {
|
|
15035
|
+
this.isLoading.set(false);
|
|
15036
|
+
}
|
|
15037
|
+
}
|
|
15038
|
+
/**
|
|
15039
|
+
* Handle image load error
|
|
15040
|
+
*/
|
|
15041
|
+
onImageError(index) {
|
|
15042
|
+
if (index === this.currentIndex()) {
|
|
15043
|
+
console.error(`[Lightbox] Image ${index} failed to load`);
|
|
15044
|
+
this.isLoading.set(false);
|
|
15045
|
+
this.hasError.set(true);
|
|
15046
|
+
}
|
|
15047
|
+
}
|
|
15048
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageWithDescriptionComponent, deps: [{ token: i1.GestureController }], target: i0.ɵɵFactoryTarget.Component });
|
|
15049
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileLightboxImageWithDescriptionComponent, isStandalone: true, selector: "ds-mobile-lightbox-image-with-description", inputs: { images: "images", author: "author", initialIndex: "initialIndex", enableZoom: "enableZoom", showControls: "showControls", enableSwipe: "enableSwipe", showInfo: "showInfo", showActions: "showActions", showDownload: "showDownload", onDownload: "onDownload", animation: "animation", onCloseRequested: "onCloseRequested" }, viewQueries: [{ propertyName: "swiperContainer", first: true, predicate: ["swiperContainer"], descendants: true, read: ElementRef }], ngImport: i0, template: `
|
|
15050
|
+
<div class="lightbox-overlay"
|
|
15051
|
+
[class.zoomed]="isZoomed()">
|
|
15052
|
+
|
|
15053
|
+
<div class="lightbox-wrapper">
|
|
15054
|
+
<ds-mobile-lightbox-header
|
|
15055
|
+
[author]="author"
|
|
15056
|
+
[showDownload]="showDownload"
|
|
15057
|
+
(closeClick)="close()"
|
|
15058
|
+
(shareClick)="onShare()"
|
|
15059
|
+
(downloadClick)="onDownloadAction()"
|
|
15060
|
+
/>
|
|
15061
|
+
|
|
15062
|
+
<div class="swiper-container" #swiperContainer>
|
|
15063
|
+
<div class="swiper-wrapper">
|
|
15064
|
+
@for (image of images; track image.src; let i = $index) {
|
|
15065
|
+
<div class="swiper-slide">
|
|
15066
|
+
<div class="image-zoom-container" [attr.data-index]="i">
|
|
15067
|
+
<img
|
|
15068
|
+
[src]="image.src"
|
|
15069
|
+
[alt]="image.alt || 'Lightbox image'"
|
|
15070
|
+
class="lightbox-image"
|
|
15071
|
+
(load)="onImageLoad(i)"
|
|
15072
|
+
(error)="onImageError(i)">
|
|
15073
|
+
</div>
|
|
15074
|
+
</div>
|
|
15075
|
+
}
|
|
15076
|
+
</div>
|
|
15077
|
+
</div>
|
|
15078
|
+
|
|
15079
|
+
@if (isLoading()) {
|
|
15080
|
+
<div class="loading-spinner">
|
|
15081
|
+
<ds-mobile-glass-spinner [spinnerSize]="32"></ds-mobile-glass-spinner>
|
|
15082
|
+
</div>
|
|
15083
|
+
}
|
|
15084
|
+
|
|
15085
|
+
<!-- AI Description Overlay -->
|
|
15086
|
+
<div class="lightbox-description-container"
|
|
15087
|
+
[class.show]="showInfo && !isSwiping() && (descriptionError() || (descriptionText() && descriptionText()!.trim().length > 0))">
|
|
15088
|
+
@if (descriptionError()) {
|
|
15089
|
+
<div class="description-error">
|
|
15090
|
+
<span>Kunne ikke hente beskrivelse.</span>
|
|
15091
|
+
<button class="retry-button" (click)="loadDescription(currentIndex())">Prøv igen</button>
|
|
15092
|
+
</div>
|
|
15093
|
+
} @else if (descriptionText() && descriptionText()!.trim().length > 0) {
|
|
15094
|
+
<div class="description-content">
|
|
15095
|
+
@if (!isDescriptionMinimized()) {
|
|
15096
|
+
<div class="ai-description-header">
|
|
15097
|
+
<div class="header-title">
|
|
15098
|
+
<ds-icon name="remixSparklingFill" size="16px"></ds-icon>
|
|
15099
|
+
<span>AI Beskrivelse</span>
|
|
15100
|
+
</div>
|
|
15101
|
+
<button class="icon-btn" (click)="isDescriptionMinimized.set(true)">
|
|
15102
|
+
<ds-icon name="remixArrowDownSLine" size="24px"></ds-icon>
|
|
15103
|
+
</button>
|
|
15104
|
+
</div>
|
|
15105
|
+
<p>{{ descriptionText() }}</p>
|
|
15106
|
+
} @else {
|
|
15107
|
+
<div class="ai-description-minimized" (click)="isDescriptionMinimized.set(false)" role="button">
|
|
15108
|
+
<ds-icon name="remixSparklingFill" size="16px"></ds-icon>
|
|
15109
|
+
<span>Vis beskrivelse</span>
|
|
15110
|
+
</div>
|
|
15111
|
+
}
|
|
15112
|
+
</div>
|
|
15113
|
+
}
|
|
15114
|
+
</div>
|
|
15115
|
+
|
|
15116
|
+
<ds-mobile-lightbox-footer
|
|
15117
|
+
[showNavigation]="showControls && images.length > 1"
|
|
15118
|
+
[showActions]="showActions"
|
|
15119
|
+
[currentIndex]="currentIndex()"
|
|
15120
|
+
[totalImages]="images.length"
|
|
15121
|
+
[isLiked]="isLiked()"
|
|
15122
|
+
[likeCount]="likeCount()"
|
|
15123
|
+
[commentCount]="commentCount()"
|
|
15124
|
+
(prevClick)="previousImage()"
|
|
15125
|
+
(nextClick)="nextImage()"
|
|
15126
|
+
(likeClick)="onLikeToggle()"
|
|
15127
|
+
(commentClick)="onReply()"
|
|
15128
|
+
/>
|
|
15129
|
+
</div>
|
|
15130
|
+
</div>
|
|
15131
|
+
`, isInline: true, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.header-title{display:flex;align-items:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.header-title ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.icon-btn{background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;cursor:pointer;margin:-4px -4px -4px 0;transition:opacity .2s}.icon-btn:active{opacity:.7}.icon-btn ds-icon::ng-deep svg{fill:#6b7280}.ai-description-minimized{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm);cursor:pointer;padding:4px 0}.ai-description-minimized ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"], dependencies: [{ kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileLightboxHeaderComponent, selector: "ds-mobile-lightbox-header", inputs: ["author", "showDownload"], outputs: ["closeClick", "shareClick", "downloadClick"] }, { kind: "component", type: DsMobileLightboxFooterComponent, selector: "ds-mobile-lightbox-footer", inputs: ["showNavigation", "currentIndex", "totalImages", "showActions", "isLiked", "likeCount", "commentCount"], outputs: ["prevClick", "nextClick", "likeClick", "commentClick"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }] });
|
|
15132
|
+
}
|
|
15133
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileLightboxImageWithDescriptionComponent, decorators: [{
|
|
15134
|
+
type: Component,
|
|
15135
|
+
args: [{ selector: 'ds-mobile-lightbox-image-with-description', standalone: true, imports: [
|
|
15136
|
+
DsMobileGlassSpinnerComponent,
|
|
15137
|
+
CommonModule,
|
|
15138
|
+
DsMobileLightboxHeaderComponent,
|
|
15139
|
+
DsMobileLightboxFooterComponent,
|
|
15140
|
+
DsIconComponent
|
|
15141
|
+
], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
|
|
15142
|
+
<div class="lightbox-overlay"
|
|
15143
|
+
[class.zoomed]="isZoomed()">
|
|
15144
|
+
|
|
15145
|
+
<div class="lightbox-wrapper">
|
|
15146
|
+
<ds-mobile-lightbox-header
|
|
15147
|
+
[author]="author"
|
|
15148
|
+
[showDownload]="showDownload"
|
|
15149
|
+
(closeClick)="close()"
|
|
15150
|
+
(shareClick)="onShare()"
|
|
15151
|
+
(downloadClick)="onDownloadAction()"
|
|
15152
|
+
/>
|
|
15153
|
+
|
|
15154
|
+
<div class="swiper-container" #swiperContainer>
|
|
15155
|
+
<div class="swiper-wrapper">
|
|
15156
|
+
@for (image of images; track image.src; let i = $index) {
|
|
15157
|
+
<div class="swiper-slide">
|
|
15158
|
+
<div class="image-zoom-container" [attr.data-index]="i">
|
|
15159
|
+
<img
|
|
15160
|
+
[src]="image.src"
|
|
15161
|
+
[alt]="image.alt || 'Lightbox image'"
|
|
15162
|
+
class="lightbox-image"
|
|
15163
|
+
(load)="onImageLoad(i)"
|
|
15164
|
+
(error)="onImageError(i)">
|
|
15165
|
+
</div>
|
|
15166
|
+
</div>
|
|
15167
|
+
}
|
|
15168
|
+
</div>
|
|
15169
|
+
</div>
|
|
15170
|
+
|
|
15171
|
+
@if (isLoading()) {
|
|
15172
|
+
<div class="loading-spinner">
|
|
15173
|
+
<ds-mobile-glass-spinner [spinnerSize]="32"></ds-mobile-glass-spinner>
|
|
15174
|
+
</div>
|
|
15175
|
+
}
|
|
15176
|
+
|
|
15177
|
+
<!-- AI Description Overlay -->
|
|
15178
|
+
<div class="lightbox-description-container"
|
|
15179
|
+
[class.show]="showInfo && !isSwiping() && (descriptionError() || (descriptionText() && descriptionText()!.trim().length > 0))">
|
|
15180
|
+
@if (descriptionError()) {
|
|
15181
|
+
<div class="description-error">
|
|
15182
|
+
<span>Kunne ikke hente beskrivelse.</span>
|
|
15183
|
+
<button class="retry-button" (click)="loadDescription(currentIndex())">Prøv igen</button>
|
|
15184
|
+
</div>
|
|
15185
|
+
} @else if (descriptionText() && descriptionText()!.trim().length > 0) {
|
|
15186
|
+
<div class="description-content">
|
|
15187
|
+
@if (!isDescriptionMinimized()) {
|
|
15188
|
+
<div class="ai-description-header">
|
|
15189
|
+
<div class="header-title">
|
|
15190
|
+
<ds-icon name="remixSparklingFill" size="16px"></ds-icon>
|
|
15191
|
+
<span>AI Beskrivelse</span>
|
|
15192
|
+
</div>
|
|
15193
|
+
<button class="icon-btn" (click)="isDescriptionMinimized.set(true)">
|
|
15194
|
+
<ds-icon name="remixArrowDownSLine" size="24px"></ds-icon>
|
|
15195
|
+
</button>
|
|
15196
|
+
</div>
|
|
15197
|
+
<p>{{ descriptionText() }}</p>
|
|
15198
|
+
} @else {
|
|
15199
|
+
<div class="ai-description-minimized" (click)="isDescriptionMinimized.set(false)" role="button">
|
|
15200
|
+
<ds-icon name="remixSparklingFill" size="16px"></ds-icon>
|
|
15201
|
+
<span>Vis beskrivelse</span>
|
|
15202
|
+
</div>
|
|
15203
|
+
}
|
|
15204
|
+
</div>
|
|
15205
|
+
}
|
|
15206
|
+
</div>
|
|
15207
|
+
|
|
15208
|
+
<ds-mobile-lightbox-footer
|
|
15209
|
+
[showNavigation]="showControls && images.length > 1"
|
|
15210
|
+
[showActions]="showActions"
|
|
15211
|
+
[currentIndex]="currentIndex()"
|
|
15212
|
+
[totalImages]="images.length"
|
|
15213
|
+
[isLiked]="isLiked()"
|
|
15214
|
+
[likeCount]="likeCount()"
|
|
15215
|
+
[commentCount]="commentCount()"
|
|
15216
|
+
(prevClick)="previousImage()"
|
|
15217
|
+
(nextClick)="nextImage()"
|
|
15218
|
+
(likeClick)="onLikeToggle()"
|
|
15219
|
+
(commentClick)="onReply()"
|
|
15220
|
+
/>
|
|
15221
|
+
</div>
|
|
15222
|
+
</div>
|
|
15223
|
+
`, styles: [".author-details{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.author-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.author-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.author-meta .separator{color:var(--color-text-tertiary, #a0a0a0)}.lightbox-context .author-name,.overlay-context .author-name{color:#fffffff2}.lightbox-context .author-meta,.overlay-context .author-meta{color:#ffffffb3}.lightbox-context .author-meta .separator,.overlay-context .author-meta .separator{color:#ffffff80}.section-headline{font-size:var(--font-size-base);font-weight:600;color:var(--text-color-default-primary);padding:16px 0;margin:0;letter-spacing:-.2px;display:flex;align-items:center;gap:6px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--text-color-default-primary, #202227);margin:0 0 8px}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--text-color-default-secondary, #545B66);margin:0}.ghost-input-clean ::ng-deep .ds-input,.ghost-input-clean ::ng-deep .ds-textarea,.ghost-input-clean ::ng-deep .textarea-container{outline:none!important;border:none!important;padding:0!important}:host ::ng-deep ds-textarea.ghost-input-clean .textarea-container{padding:0!important}.ghost-input-clean ::ng-deep .ds-input:hover,.ghost-input-clean ::ng-deep .ds-textarea:hover,.ghost-input-clean ::ng-deep .textarea-container:hover,.ghost-input-clean ::ng-deep .ds-input:focus,.ghost-input-clean ::ng-deep .ds-textarea:focus,.ghost-input-clean ::ng-deep .textarea-container:focus,.ghost-input-clean ::ng-deep .ds-input:focus-within,.ghost-input-clean ::ng-deep .ds-textarea:focus-within,.ghost-input-clean ::ng-deep .textarea-container:focus-within{outline:none!important;border:none!important;box-shadow:none!important}.ghost-input-clean ::ng-deep textarea{outline:none!important;border:none!important;box-shadow:none!important;resize:none!important}.ghost-input-clean ::ng-deep textarea:hover,.ghost-input-clean ::ng-deep textarea:focus{outline:none!important;border:none!important;box-shadow:none!important}:host{display:block;position:fixed;inset:0;width:100vw;height:100vh;z-index:10000}.lightbox-overlay{position:fixed;inset:0;width:100vw;height:100vh;background:#000000fa;z-index:10000;display:flex;flex-direction:column;touch-action:none;animation:fadeIn .2s ease-out}.lightbox-overlay.zoomed{overflow:hidden}.lightbox-content{display:block;height:100vh;width:100vw;position:absolute;inset:0}.lightbox-content::part(scroll){display:flex;flex-direction:column;height:100%;overflow:hidden}.lightbox-wrapper{position:absolute;inset:0;display:flex;flex-direction:column;width:100%;height:100%}.lightbox-content.zoomed{overflow:hidden}.lightbox-header{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 16px;background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.4) 80%,transparent 100%);pointer-events:none}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto}.post-author-info{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.author-details{display:flex;flex-direction:column;min-width:0;flex:1}.author-name{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;letter-spacing:-.3px}.author-meta{color:#ffffffb3;font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;display:flex;align-items:center;gap:6px}.author-meta .separator{color:#ffffff80}.close-button,.share-button{pointer-events:auto;flex-shrink:0;border-radius:50%}.close-button::ng-deep button,.share-button::ng-deep button{color:#fff!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:50%!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button::ng-deep button:hover,.share-button::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.close-button::ng-deep button:active,.share-button::ng-deep button:active{background:#fff3!important;transform:scale(.98)}.close-button::ng-deep svg,.share-button::ng-deep svg{color:#fff!important;fill:#fff!important}.swiper-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}.swiper-wrapper{width:100%;height:100%}.swiper-slide{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.image-zoom-container{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.lightbox-image{max-width:min(640px,100%);max-height:100%;width:auto;height:auto;-o-object-fit:contain;object-fit:contain;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-user-drag:none;transition:transform .3s ease-out;transform-origin:center center}.lightbox-overlay.zoomed .swiper-container{touch-action:none}.loading-spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10}.loading-spinner ion-spinner{--color: rgba(255, 255, 255, .8);width:48px;height:48px}.error-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;text-align:center;color:#fffc;font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:500;padding:20px;background:#00000080;border-radius:12px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.lightbox-bottom-section{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;flex-direction:column;background:linear-gradient(to top,rgba(0,0,0,.8) 0%,rgba(0,0,0,.6) 50%,rgba(0,0,0,.4) 75%,transparent 100%);pointer-events:none}.lightbox-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:16px 20px 12px;pointer-events:none}.nav-button,.counter{pointer-events:auto}.nav-button{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease;padding:0;margin:0;outline:none}.nav-button:hover:not(:disabled){background:#fff3;transform:scale(1.05)}.nav-button:active:not(:disabled){transform:scale(.95)}.nav-button:disabled{opacity:.3;cursor:not-allowed}.nav-button svg{width:24px;height:24px}.counter{color:#fff;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:1;padding:10px 16px;background:#00000080;border-radius:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-bottom-section{padding-bottom:env(safe-area-inset-bottom)}}.lightbox-footer{display:flex;padding:12px 20px 20px;pointer-events:none}.footer-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}.action-buttons-left{display:flex;align-items:center;gap:16px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-with-count::ng-deep button,.action-button-share::ng-deep button{background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;color:#fff!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:all .2s ease}.action-button-like::ng-deep button:hover,.action-button-comment::ng-deep button:hover,.action-button-with-count::ng-deep button:hover,.action-button-share::ng-deep button:hover{background:#fff3!important;transform:scale(1.02)}.action-button-like::ng-deep button:active,.action-button-comment::ng-deep button:active,.action-button-with-count::ng-deep button:active,.action-button-share::ng-deep button:active{transform:scale(.98)}.action-button-like::ng-deep button svg,.action-button-comment::ng-deep button svg,.action-button-with-count::ng-deep button svg,.action-button-share::ng-deep button svg,.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon,.action-button-like::ng-deep button .btn__content,.action-button-comment::ng-deep button .btn__content,.action-button-with-count::ng-deep button .btn__content{color:#fff!important;fill:#fff!important}.action-button-like::ng-deep button .btn__icon svg,.action-button-comment::ng-deep button .btn__icon svg,.action-button-with-count::ng-deep button .btn__icon svg,.action-button-share::ng-deep button .btn__icon svg{color:#fff!important;fill:#fff!important;display:block!important;opacity:1!important;visibility:visible!important;width:20px!important;height:20px!important}.action-button-like::ng-deep button .btn__icon,.action-button-comment::ng-deep button .btn__icon,.action-button-with-count::ng-deep button .btn__icon,.action-button-share::ng-deep button .btn__icon{display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}.action-button-like[data-liked=true]::ng-deep button svg{fill:#f91880!important;color:#f91880!important}.action-button-like[data-liked=true]::ng-deep button{border-color:#f918804d!important}.action-button-like,.action-button-comment,.action-button-share{flex-shrink:0;border-radius:50%}.action-button-like::ng-deep button,.action-button-comment::ng-deep button,.action-button-share::ng-deep button{border-radius:50%!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}@media (min-width: 768px){.lightbox-header{padding:24px}.close-button{width:48px;height:48px}.lightbox-controls{padding:20px 24px 16px}.nav-button{width:48px;height:48px}.counter{font-size:var(--font-size-base);padding:12px 20px}.lightbox-footer{padding:16px 24px 24px}.action-button-like::ng-deep button,.action-button-comment::ng-deep button{height:48px;padding:0 20px}.action-button-share::ng-deep button{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (prefers-reduced-motion: reduce){.image-wrapper,.nav-button,.lightbox-caption{transition:none}}.nav-button:focus-visible{outline:2px solid white;outline-offset:2px}.lightbox-description-container{position:absolute;bottom:85px;left:16px;right:16px;max-height:30vh;overflow-y:auto;background:#fff;border-radius:16px;padding:16px;color:#111827;z-index:90;opacity:0;visibility:hidden;transition:all .3s ease;transform:translateY(10px);pointer-events:auto;box-shadow:0 4px 24px #00000040}.lightbox-description-container.show{opacity:1;visibility:visible;transform:translateY(0)}.description-loader{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0}.description-loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#6b7280}.description-error{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:12px 0}.description-error span{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#111827}.description-error .retry-button{background:var(--color-accent, #6B5FF5);border:none;color:#fff;border-radius:20px;padding:6px 16px;font-size:var(--font-size-xs);cursor:pointer;font-family:Brockmann,sans-serif;transition:background .2s}.description-error .retry-button:active{background:var(--color-accent-dark, #5A4EE3)}.ai-description-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.header-title{display:flex;align-items:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm)}.header-title ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.icon-btn{background:none;border:none;padding:4px;display:flex;align-items:center;justify-content:center;color:#6b7280;cursor:pointer;margin:-4px -4px -4px 0;transition:opacity .2s}.icon-btn:active{opacity:.7}.icon-btn ds-icon::ng-deep svg{fill:#6b7280}.ai-description-minimized{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--color-accent, #6B5FF5);font-family:Brockmann,sans-serif;font-weight:600;font-size:var(--font-size-sm);cursor:pointer;padding:4px 0}.ai-description-minimized ds-icon::ng-deep svg{fill:var(--color-accent, #6B5FF5);color:var(--color-accent, #6B5FF5)}.description-content p{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:1.5;color:#111827;white-space:pre-wrap;margin:0}@supports (padding-bottom: env(safe-area-inset-bottom)){.lightbox-description-container{bottom:calc(85px + env(safe-area-inset-bottom))}}\n"] }]
|
|
15224
|
+
}], ctorParameters: () => [{ type: i1.GestureController }], propDecorators: { images: [{
|
|
15225
|
+
type: Input
|
|
15226
|
+
}], author: [{
|
|
15227
|
+
type: Input
|
|
15228
|
+
}], initialIndex: [{
|
|
15229
|
+
type: Input
|
|
15230
|
+
}], enableZoom: [{
|
|
15231
|
+
type: Input
|
|
15232
|
+
}], showControls: [{
|
|
15233
|
+
type: Input
|
|
15234
|
+
}], enableSwipe: [{
|
|
15235
|
+
type: Input
|
|
15236
|
+
}], showInfo: [{
|
|
15237
|
+
type: Input
|
|
15238
|
+
}], showActions: [{
|
|
15239
|
+
type: Input
|
|
15240
|
+
}], showDownload: [{
|
|
15241
|
+
type: Input
|
|
15242
|
+
}], onDownload: [{
|
|
15243
|
+
type: Input
|
|
15244
|
+
}], animation: [{
|
|
15245
|
+
type: Input
|
|
15246
|
+
}], onCloseRequested: [{
|
|
15247
|
+
type: Input
|
|
15248
|
+
}], swiperContainer: [{
|
|
15249
|
+
type: ViewChild,
|
|
15250
|
+
args: ['swiperContainer', { read: ElementRef }]
|
|
15251
|
+
}] } });
|
|
15252
|
+
|
|
14655
15253
|
/**
|
|
14656
15254
|
* DsMobileLightboxPdfComponent
|
|
14657
15255
|
*
|
|
@@ -15155,6 +15753,49 @@ class DsMobileLightboxService {
|
|
|
15155
15753
|
// Return dismiss function
|
|
15156
15754
|
return () => this.close();
|
|
15157
15755
|
}
|
|
15756
|
+
/**
|
|
15757
|
+
* Open the image lightbox with one or more images that support descriptions
|
|
15758
|
+
*
|
|
15759
|
+
* @param options Configuration options for the image lightbox with descriptions
|
|
15760
|
+
* @returns Promise that resolves to a dismiss function
|
|
15761
|
+
*/
|
|
15762
|
+
async openImagesWithDescription(options) {
|
|
15763
|
+
console.log('[Lightbox] Opening images with description with options:', options);
|
|
15764
|
+
// Close any existing lightbox
|
|
15765
|
+
if (this.currentLightbox) {
|
|
15766
|
+
this.close();
|
|
15767
|
+
}
|
|
15768
|
+
// Create the component
|
|
15769
|
+
const componentRef = createComponent(DsMobileLightboxImageWithDescriptionComponent, {
|
|
15770
|
+
environmentInjector: this.injector
|
|
15771
|
+
});
|
|
15772
|
+
// Set component props
|
|
15773
|
+
componentRef.instance.images = options.images;
|
|
15774
|
+
componentRef.instance.author = options.author;
|
|
15775
|
+
componentRef.instance.initialIndex = options.initialIndex ?? 0;
|
|
15776
|
+
componentRef.instance.enableZoom = options.enableZoom !== false;
|
|
15777
|
+
componentRef.instance.showControls = options.showControls !== false;
|
|
15778
|
+
componentRef.instance.enableSwipe = options.enableSwipe !== false;
|
|
15779
|
+
componentRef.instance.showInfo = options.showInfo !== false;
|
|
15780
|
+
componentRef.instance.showActions = options.showActions ?? false;
|
|
15781
|
+
componentRef.instance.showDownload = options.showDownload ?? false;
|
|
15782
|
+
componentRef.instance.onDownload = options.onDownload;
|
|
15783
|
+
componentRef.instance.animation = options.animation ?? 'fade';
|
|
15784
|
+
// Set up close callback
|
|
15785
|
+
componentRef.instance.onCloseRequested = () => {
|
|
15786
|
+
this.close();
|
|
15787
|
+
};
|
|
15788
|
+
// Attach to application
|
|
15789
|
+
this.appRef.attachView(componentRef.hostView);
|
|
15790
|
+
// Append to body
|
|
15791
|
+
const domElem = componentRef.hostView.rootNodes[0];
|
|
15792
|
+
document.body.appendChild(domElem);
|
|
15793
|
+
// Store reference
|
|
15794
|
+
this.currentLightbox = componentRef;
|
|
15795
|
+
console.log('[Lightbox] Image with description lightbox rendered');
|
|
15796
|
+
// Return dismiss function
|
|
15797
|
+
return () => this.close();
|
|
15798
|
+
}
|
|
15158
15799
|
/**
|
|
15159
15800
|
* Open the PDF lightbox (opens native PDF viewer)
|
|
15160
15801
|
*
|
|
@@ -30167,6 +30808,7 @@ class MobileHomePageComponent {
|
|
|
30167
30808
|
familyAccessService;
|
|
30168
30809
|
peerMessaging;
|
|
30169
30810
|
peerChat;
|
|
30811
|
+
lightboxService;
|
|
30170
30812
|
pageComponent;
|
|
30171
30813
|
isPeerGroupConversation = isPeerGroupConversation;
|
|
30172
30814
|
// isLoading is owned by PageLoadingService so the layout can react to it
|
|
@@ -30188,7 +30830,7 @@ class MobileHomePageComponent {
|
|
|
30188
30830
|
modalCtrl = inject(ModalController);
|
|
30189
30831
|
vendorModal = inject(DsMobileServiceVendorModalService);
|
|
30190
30832
|
newInquiryModal = inject(DsMobileNewInquiryModalService);
|
|
30191
|
-
constructor(router, navCtrl, userService, postsService, postModal, trackingPermissionService, bottomSheet, familyAccessService, peerMessaging, peerChat) {
|
|
30833
|
+
constructor(router, navCtrl, userService, postsService, postModal, trackingPermissionService, bottomSheet, familyAccessService, peerMessaging, peerChat, lightboxService) {
|
|
30192
30834
|
this.router = router;
|
|
30193
30835
|
this.navCtrl = navCtrl;
|
|
30194
30836
|
this.userService = userService;
|
|
@@ -30199,6 +30841,7 @@ class MobileHomePageComponent {
|
|
|
30199
30841
|
this.familyAccessService = familyAccessService;
|
|
30200
30842
|
this.peerMessaging = peerMessaging;
|
|
30201
30843
|
this.peerChat = peerChat;
|
|
30844
|
+
this.lightboxService = lightboxService;
|
|
30202
30845
|
console.log('MobileHomePageComponent constructor');
|
|
30203
30846
|
}
|
|
30204
30847
|
ngOnInit() {
|
|
@@ -30343,7 +30986,7 @@ class MobileHomePageComponent {
|
|
|
30343
30986
|
}
|
|
30344
30987
|
}
|
|
30345
30988
|
}
|
|
30346
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, deps: [{ token: i1$3.Router }, { token: i1.NavController }, { token: UserService }, { token: PostsService }, { token: DsMobilePostDetailModalService }, { token: TrackingPermissionService }, { token: DsMobileBottomSheetService }, { token: FamilyAccessService }, { token: PeerMessagingService }, { token: PeerChatLauncherService }], target: i0.ɵɵFactoryTarget.Component });
|
|
30989
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, deps: [{ token: i1$3.Router }, { token: i1.NavController }, { token: UserService }, { token: PostsService }, { token: DsMobilePostDetailModalService }, { token: TrackingPermissionService }, { token: DsMobileBottomSheetService }, { token: FamilyAccessService }, { token: PeerMessagingService }, { token: PeerChatLauncherService }, { token: DsMobileLightboxService }], target: i0.ɵɵFactoryTarget.Component });
|
|
30347
30990
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MobileHomePageComponent, isStandalone: true, selector: "app-home-page", viewQueries: [{ propertyName: "pageComponent", first: true, predicate: ["pageComponent"], descendants: true }], ngImport: i0, template: `
|
|
30348
30991
|
<!-- Full-screen loading state (first entry) — rendered by layout, not here -->
|
|
30349
30992
|
|
|
@@ -30803,7 +31446,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
30803
31446
|
} <!-- end @if (!isCoveringScreen()) -->
|
|
30804
31447
|
|
|
30805
31448
|
`, styles: [".posts-list,.messages-preview-list{display:flex;flex-direction:column}.property-banner-nav{display:block;width:100%;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}.property-banner-nav:focus-visible{outline:2px solid var(--color-accent, #6B5FF5);outline-offset:2px}.inquiries-list,.services-preview-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.welcome-toast{padding:10px 14px;border-radius:12px;background:var(--color-background-brand-secondary, #EEF0FF);display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:500;color:var(--color-accent, #6B5FF5);animation:slideDown .2s ease-out}.toast-icon{width:20px;height:20px;border-radius:50%;background:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;margin-top:1px}.welcome-toast-content{flex:1;display:flex;flex-direction:column;gap:2px}.welcome-toast-heading{font-family:Brockmann,sans-serif;font-size:14px;font-weight:600;color:var(--color-brand-content, #3B3691);margin:0}.welcome-toast-text{font-family:Brockmann,sans-serif;font-size:13px;line-height:1.4;color:var(--color-brand-content, #3B3691);margin:0;opacity:.8}.welcome-toast-text strong{font-weight:600;opacity:1}.toast-dismiss{margin-left:auto;background:none;border:none;cursor:pointer;flex-shrink:0;color:var(--color-accent, #6B5FF5);display:flex;align-items:center;justify-content:center}.home-content--animating{animation:homeReveal .3s var(--spring-curve-smooth) both}@keyframes homeReveal{0%{opacity:0;transform:translateY(128px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
30806
|
-
}], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.NavController }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }, { type: TrackingPermissionService }, { type: DsMobileBottomSheetService }, { type: FamilyAccessService }, { type: PeerMessagingService }, { type: PeerChatLauncherService }], propDecorators: { pageComponent: [{
|
|
31449
|
+
}], ctorParameters: () => [{ type: i1$3.Router }, { type: i1.NavController }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }, { type: TrackingPermissionService }, { type: DsMobileBottomSheetService }, { type: FamilyAccessService }, { type: PeerMessagingService }, { type: PeerChatLauncherService }, { type: DsMobileLightboxService }], propDecorators: { pageComponent: [{
|
|
30807
31450
|
type: ViewChild,
|
|
30808
31451
|
args: ['pageComponent']
|
|
30809
31452
|
}] } });
|
|
@@ -36458,5 +37101,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
36458
37101
|
* Generated bundle index. Do not edit.
|
|
36459
37102
|
*/
|
|
36460
37103
|
|
|
36461
|
-
export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, SectionHeaderComponent, ServicesPageComponent, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
|
|
37104
|
+
export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, SectionHeaderComponent, ServicesPageComponent, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
|
|
36462
37105
|
//# sourceMappingURL=propbinder-mobile-design.mjs.map
|