ngx-payvent-shared 0.0.2 → 0.0.4

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.
@@ -1,17 +1,16 @@
1
1
  import * as i0 from '@angular/core';
2
- import { signal, Input, Component, Injectable, EventEmitter, inject, DOCUMENT, computed, effect, Pipe, HostListener, input, model, output, ViewChild, ViewEncapsulation, ElementRef, HostBinding, Renderer2, Output, untracked, afterEveryRender, afterNextRender, Directive } from '@angular/core';
2
+ import { signal, Input, Component, Injectable, EventEmitter, inject, DOCUMENT, computed, effect, Pipe, HostListener, input, model, output, ViewChild, ViewEncapsulation, ElementRef, HostBinding, Renderer2, Output, viewChild, untracked, afterEveryRender, afterNextRender, Directive } from '@angular/core';
3
3
  import { EdgeToEdge } from '@capawesome/capacitor-android-edge-to-edge-support';
4
4
  import { Capacitor } from '@capacitor/core';
5
5
  import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
6
6
  import { timer, shareReplay, ReplaySubject, of, tap, firstValueFrom, from, share } from 'rxjs';
7
- import * as i2$4 from '@angular/router';
7
+ import * as i2$3 from '@angular/router';
8
8
  import { ActivatedRoute, Router, NavigationStart, NavigationEnd, NavigationCancel } from '@angular/router';
9
9
  import { catchError, pairwise, map, shareReplay as shareReplay$1 } from 'rxjs/operators';
10
10
  import * as uuid from 'uuid';
11
11
  import * as signalR from '@microsoft/signalr';
12
- import * as i2$3 from 'primeng/api';
13
12
  import { MessageService, ConfirmationService } from 'primeng/api';
14
- import * as i1$3 from '@angular/common';
13
+ import * as i1$2 from '@angular/common';
15
14
  import { Location, CommonModule, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
16
15
  import bowser from 'bowser';
17
16
  import { toObservable } from '@angular/core/rxjs-interop';
@@ -41,7 +40,6 @@ import { CardModule } from 'primeng/card';
41
40
  import { StyleClassModule } from 'primeng/styleclass';
42
41
  import * as i1$1 from 'primeng/toast';
43
42
  import { ToastModule } from 'primeng/toast';
44
- import * as i1$2 from 'primeng/drawer';
45
43
  import { DrawerModule } from 'primeng/drawer';
46
44
  import { RippleModule } from 'primeng/ripple';
47
45
 
@@ -691,7 +689,7 @@ class SidebarService {
691
689
  });
692
690
  }
693
691
  openSidebar(component, data = null, options = {}) {
694
- let defaultPosition = 'right';
692
+ let defaultPosition = 'bottom';
695
693
  if (window.innerWidth < 576) {
696
694
  document.getElementsByTagName("html")[0].style['overscroll-behavior'] = 'none';
697
695
  document.getElementsByTagName("body")[0].style['overscroll-behavior'] = 'none';
@@ -708,18 +706,10 @@ class SidebarService {
708
706
  if (options.position == 'top' || options.position == 'bottom') {
709
707
  options.ngStyle.width = null;
710
708
  options.ngStyle.height = options.ngStyle.height || '30%';
711
- options.ngStyle['max-height'] = '95%';
709
+ options.ngStyle['max-height'] = options.ngStyle.height == '100%' ? '100%' : '95%';
712
710
  options.contentScrollable = signal(false, ...(ngDevMode ? [{ debugName: "contentScrollable" }] : []));
713
- if (options.ngStyle.height == '95%')
711
+ if (options.ngStyle.height == '95%' || options.ngStyle.height == '100%')
714
712
  options.contentScrollable.set(true);
715
- if (options.position == 'bottom') {
716
- options.ngStyle['border-top-left-radius'] = 'var(--p-border-radius)';
717
- options.ngStyle['border-top-right-radius'] = 'var(--p-border-radius)';
718
- }
719
- if (options.position == 'top') {
720
- options.ngStyle['border-bottom-left-radius'] = 'var(--p-border-radius)';
721
- options.ngStyle['border-bottom-right-radius'] = 'var(--p-border-radius)';
722
- }
723
713
  }
724
714
  let obj = {
725
715
  id: uuid.v4(),
@@ -754,7 +744,7 @@ class SidebarService {
754
744
  if (options.position == 'bottom' && size.height) {
755
745
  options.ngStyle.transition = 'height .2s';
756
746
  options.ngStyle.height = size.height;
757
- if (size.height == '95%')
747
+ if (size.height == '95%' || size.height == '100%')
758
748
  options.contentScrollable.set(true);
759
749
  else
760
750
  options.contentScrollable.set(false);
@@ -2462,11 +2452,11 @@ class SidebarComponent {
2462
2452
  }
2463
2453
  }
2464
2454
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2465
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SidebarComponent, isStandalone: true, selector: "sidebar", viewQueries: [{ propertyName: "contentComponent", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(sidebarService.sidebars().length > 0) {\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" style=\"height: 100%;\" class=\"sidebar-container\">\r\n <p-drawer [visible]=\"sidebar.visible\" [appendTo]=\"'sidebar-' + sidebar.id\" dismissible=\"false\" closeOnEscape=\"false\"\r\n [position]=\"sidebar.options.position\" [style]=\"sidebar.options.ngStyle\">\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-col h-full\" [id]=\"'sidebar-body-' + sidebar.id\" style=\"touch-action: none;\"\r\n (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"flex align-items-center justify-center px-3 py-2 flex-shrink-0 md:absolute md:z-100 md:right-0\"\r\n [id]=\"'sidebar-header-' + sidebar.id\">\r\n <span [id]=\"'sidebar-header-inner-' + sidebar.id\"\r\n class=\"inline-flex flex-1 align-items-center justify-center gap-2 \">\r\n @if (sidebar.options.position=='bottom') {\r\n <div class=\"inline-block self-center bg-sky-400 rounded-full\" [id]=\"'sidebar-header-hook-' + sidebar.id\"\r\n style=\"height: .3rem; width:70px\"></div>\r\n }\r\n </span>\r\n @if(sidebar.options.position == 'left' || sidebar.options.position == 'right') {\r\n <span>\r\n <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n <i class=\"fi fi-rr-cross\"></i>\r\n </a>\r\n </span>\r\n }\r\n </div>\r\n <div #content\r\n [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-8': !sidebar.options.noPadding, 'h-full': true }\">\r\n <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-drawer>\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".sidebar-container{z-index:1000;position:fixed}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i1$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: HammerModule }] });
2455
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: SidebarComponent, isStandalone: true, selector: "sidebar", viewQueries: [{ propertyName: "contentComponent", first: true, predicate: ["content"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if(sidebarService.sidebars().length > 0) {\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" class=\"sidebar-container container left-1/2 -translate-x-1/2 w-full\"\r\n [ngStyle]=\"sidebar.options.ngStyle\" animate.enter=\"fade-in\" animate.leave=\"fade-out\">\r\n <div class=\"flex flex-col h-full sidebar-pan-control\" [id]=\"'sidebar-body-' + sidebar.id\"\r\n style=\"touch-action: none;\" (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"sm:text-right text-center px-3 py-2 inline-block leading-none\" [id]=\"'sidebar-header-' + sidebar.id\">\r\n <div class=\"self-center bg-sky-400 rounded-full inline-block sm:hidden\"\r\n [id]=\"'sidebar-header-hook-' + sidebar.id\" style=\"height: .3rem; width:70px\"></div>\r\n <div class=\"hidden sm:inline-block\">\r\n <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n <i class=\"fi fi-rr-cross\"></i>\r\n </a>\r\n </div>\r\n </div>\r\n <div #content\r\n [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-8': !sidebar.options.noPadding, 'h-full': true }\">\r\n <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".sidebar-container{bottom:0;position:fixed;background-color:var(--p-surface-0);border-top-left-radius:var(--p-border-radius-xl);border-top-right-radius:var(--p-border-radius-xl)}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sidebar-pan-control{border-top-left-radius:var(--p-border-radius);border-top-right-radius:var(--p-border-radius)}.fade-in{animation:fadeIn .2s}@keyframes fadeIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}.fade-out{animation:fadeOut .2s}@keyframes fadeOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"], dependencies: [{ kind: "ngmodule", type: DrawerModule }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: HammerModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
2466
2456
  }
2467
2457
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: SidebarComponent, decorators: [{
2468
2458
  type: Component,
2469
- args: [{ selector: 'sidebar', standalone: true, imports: [DrawerModule, NgComponentOutlet, ButtonModule, HammerModule], template: "@if(sidebarService.sidebars().length > 0) {\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" style=\"height: 100%;\" class=\"sidebar-container\">\r\n <p-drawer [visible]=\"sidebar.visible\" [appendTo]=\"'sidebar-' + sidebar.id\" dismissible=\"false\" closeOnEscape=\"false\"\r\n [position]=\"sidebar.options.position\" [style]=\"sidebar.options.ngStyle\">\r\n <ng-template pTemplate=\"headless\">\r\n <div class=\"flex flex-col h-full\" [id]=\"'sidebar-body-' + sidebar.id\" style=\"touch-action: none;\"\r\n (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"flex align-items-center justify-center px-3 py-2 flex-shrink-0 md:absolute md:z-100 md:right-0\"\r\n [id]=\"'sidebar-header-' + sidebar.id\">\r\n <span [id]=\"'sidebar-header-inner-' + sidebar.id\"\r\n class=\"inline-flex flex-1 align-items-center justify-center gap-2 \">\r\n @if (sidebar.options.position=='bottom') {\r\n <div class=\"inline-block self-center bg-sky-400 rounded-full\" [id]=\"'sidebar-header-hook-' + sidebar.id\"\r\n style=\"height: .3rem; width:70px\"></div>\r\n }\r\n </span>\r\n @if(sidebar.options.position == 'left' || sidebar.options.position == 'right') {\r\n <span>\r\n <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n <i class=\"fi fi-rr-cross\"></i>\r\n </a>\r\n </span>\r\n }\r\n </div>\r\n <div #content\r\n [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-8': !sidebar.options.noPadding, 'h-full': true }\">\r\n <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n </div>\r\n </div>\r\n </ng-template>\r\n </p-drawer>\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".sidebar-container{z-index:1000;position:fixed}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}\n"] }]
2459
+ args: [{ selector: 'sidebar', standalone: true, imports: [DrawerModule, NgComponentOutlet, ButtonModule, HammerModule, CommonModule], template: "@if(sidebarService.sidebars().length > 0) {\r\n<div class=\"sidebar-overlay\">\r\n @for(sidebar of sidebarService.sidebars(); track sidebar.id) {\r\n <div [id]=\"'sidebar-' + sidebar.id\" class=\"sidebar-container container left-1/2 -translate-x-1/2 w-full\"\r\n [ngStyle]=\"sidebar.options.ngStyle\" animate.enter=\"fade-in\" animate.leave=\"fade-out\">\r\n <div class=\"flex flex-col h-full sidebar-pan-control\" [id]=\"'sidebar-body-' + sidebar.id\"\r\n style=\"touch-action: none;\" (touchmove)=\"onPan($event, sidebar.id)\" (touchstart)=\"onPan($event, sidebar.id)\"\r\n (touchend)=\"onPan($event, sidebar.id)\">\r\n <div class=\"sm:text-right text-center px-3 py-2 inline-block leading-none\" [id]=\"'sidebar-header-' + sidebar.id\">\r\n <div class=\"self-center bg-sky-400 rounded-full inline-block sm:hidden\"\r\n [id]=\"'sidebar-header-hook-' + sidebar.id\" style=\"height: .3rem; width:70px\"></div>\r\n <div class=\"hidden sm:inline-block\">\r\n <a (click)=\"closeCallback(sidebar.id)\" class=\"text-2xl p-2 opacity-40 font-bold\">\r\n <i class=\"fi fi-rr-cross\"></i>\r\n </a>\r\n </div>\r\n </div>\r\n <div #content\r\n [class]=\"{ 'overflow-y-auto': sidebar.options.contentScrollable(), 'p-8': !sidebar.options.noPadding, 'h-full': true }\">\r\n <ng-container *ngComponentOutlet=\"sidebar.component;inputs: sidebar.inputs;\" />\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n}", styles: [".sidebar-container{bottom:0;position:fixed;background-color:var(--p-surface-0);border-top-left-radius:var(--p-border-radius-xl);border-top-right-radius:var(--p-border-radius-xl)}.sidebar-overlay{position:fixed;inset:0;z-index:999;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.sidebar-pan-control{border-top-left-radius:var(--p-border-radius);border-top-right-radius:var(--p-border-radius)}.fade-in{animation:fadeIn .2s}@keyframes fadeIn{0%{transform:translateY(100%)}to{transform:translateY(0)}}.fade-out{animation:fadeOut .2s}@keyframes fadeOut{0%{transform:translateY(0)}to{transform:translateY(100%)}}\n"] }]
2470
2460
  }], propDecorators: { contentComponent: [{
2471
2461
  type: ViewChild,
2472
2462
  args: ['content', { read: ElementRef }]
@@ -2486,27 +2476,47 @@ class StoriesComponent {
2486
2476
  currentStory = computed(() => this.stories()[this.currentStoryIndex()], ...(ngDevMode ? [{ debugName: "currentStory" }] : []));
2487
2477
  defaultDuration = input(7, ...(ngDevMode ? [{ debugName: "defaultDuration" }] : []));
2488
2478
  currentProgress = signal(0, ...(ngDevMode ? [{ debugName: "currentProgress" }] : []));
2479
+ currentDuration = signal(0, ...(ngDevMode ? [{ debugName: "currentDuration" }] : []));
2489
2480
  currentTime = 0;
2490
2481
  timerInterval = 100;
2491
2482
  timerSubscription;
2492
2483
  paused = model(false, ...(ngDevMode ? [{ debugName: "paused" }] : []));
2493
2484
  close = output();
2494
2485
  sidebarService = inject(SidebarService);
2495
- videoPlayer;
2486
+ videoPlayer = viewChild('videoPlayer', ...(ngDevMode ? [{ debugName: "videoPlayer" }] : []));
2487
+ storyContainer = viewChild('viewContainer', ...(ngDevMode ? [{ debugName: "storyContainer" }] : []));
2488
+ regularStyle;
2496
2489
  constructor() {
2497
2490
  effect(() => {
2498
2491
  if (this.currentStoryIndex() == -1 && this.stories().length > 0)
2499
2492
  untracked(() => this.next());
2500
2493
  });
2494
+ effect(() => {
2495
+ if (!this.videoPlayer())
2496
+ return;
2497
+ this.videoPlayer().nativeElement.addEventListener('loadeddata', () => {
2498
+ this.currentDuration.set(this.videoPlayer().nativeElement.duration);
2499
+ this.runTimer();
2500
+ }, { once: true });
2501
+ });
2501
2502
  effect(() => {
2502
2503
  if (!this.paused()) {
2503
2504
  untracked(() => this.runTimer());
2504
- if (this.videoPlayer)
2505
- this.videoPlayer.nativeElement.play();
2505
+ if (this.videoPlayer())
2506
+ this.videoPlayer().nativeElement.play();
2506
2507
  }
2507
2508
  else {
2508
- if (this.videoPlayer)
2509
- this.videoPlayer.nativeElement.pause();
2509
+ if (this.videoPlayer())
2510
+ this.videoPlayer().nativeElement.pause();
2511
+ }
2512
+ });
2513
+ effect(() => {
2514
+ if (this.fullScreen()) {
2515
+ this.storyContainer().nativeElement.style.position = 'fixed';
2516
+ this.storyContainer().nativeElement.style.width = '100%';
2517
+ this.storyContainer().nativeElement.style.height = '100%';
2518
+ this.storyContainer().nativeElement.style.top = '0';
2519
+ this.storyContainer().nativeElement.style.left = '0';
2510
2520
  }
2511
2521
  });
2512
2522
  }
@@ -2520,9 +2530,11 @@ class StoriesComponent {
2520
2530
  this.currentProgress.set(0);
2521
2531
  this.currentTime = 0;
2522
2532
  if (this.currentStory().type == 'video') {
2523
- timer(100).subscribe(() => console.log(this.videoPlayer.nativeElement.duration));
2524
2533
  }
2525
- this.runTimer();
2534
+ else {
2535
+ this.currentDuration.set(15);
2536
+ this.runTimer();
2537
+ }
2526
2538
  }
2527
2539
  runTimer() {
2528
2540
  if (this.timerSubscription)
@@ -2531,7 +2543,7 @@ class StoriesComponent {
2531
2543
  return;
2532
2544
  this.timerSubscription = timer(this.timerInterval).subscribe(() => {
2533
2545
  this.currentTime += this.timerInterval;
2534
- let duration = this.currentStory()?.duration ?? this.defaultDuration();
2546
+ let duration = this.currentDuration() ?? this.defaultDuration();
2535
2547
  this.currentProgress.set(this.currentTime / (duration * 10));
2536
2548
  if (this.currentTime >= duration * 1000)
2537
2549
  this.next();
@@ -2543,22 +2555,49 @@ class StoriesComponent {
2543
2555
  //this.sidebarService.closeSidebar(id);
2544
2556
  }
2545
2557
  emitClose() {
2558
+ document.getElementsByTagName("html")[0].style['overflow'] = 'initial';
2559
+ document.getElementsByTagName("body")[0].style['overflow'] = 'initial';
2546
2560
  this.fullScreen.set(false);
2561
+ if (this.regularStyle) {
2562
+ this.storyContainer().nativeElement.style.width = this.regularStyle.width;
2563
+ this.storyContainer().nativeElement.style.height = this.regularStyle.height;
2564
+ this.storyContainer().nativeElement.style.top = this.regularStyle.top;
2565
+ this.storyContainer().nativeElement.style.left = this.regularStyle.left;
2566
+ this.storyContainer().nativeElement.addEventListener('transitionend', () => {
2567
+ this.storyContainer().nativeElement.style = {};
2568
+ this.storyContainer().nativeElement.style.position = 'relative';
2569
+ }, { once: true });
2570
+ }
2547
2571
  this.close.emit();
2548
2572
  }
2549
2573
  setFullScreen() {
2574
+ document.getElementsByTagName("html")[0].style['overflow'] = 'hidden';
2575
+ document.getElementsByTagName("body")[0].style['overflow'] = 'hidden';
2576
+ this.storyContainer().nativeElement.style.width = this.storyContainer().nativeElement.offsetWidth + 'px';
2577
+ this.storyContainer().nativeElement.style.height = this.storyContainer().nativeElement.offsetHeight + 'px';
2578
+ this.storyContainer().nativeElement.style.top = this.storyContainer().nativeElement.getBoundingClientRect().top + 'px';
2579
+ this.storyContainer().nativeElement.style.left = this.storyContainer().nativeElement.getBoundingClientRect().left + 'px';
2580
+ this.storyContainer().nativeElement.style.transition = 'all .2s';
2581
+ this.regularStyle = {
2582
+ top: this.storyContainer().nativeElement.style.top,
2583
+ left: this.storyContainer().nativeElement.style.left,
2584
+ width: this.storyContainer().nativeElement.style.width,
2585
+ height: this.storyContainer().nativeElement.style.height
2586
+ };
2587
+ this.storyContainer().nativeElement.style.position = 'fixed';
2550
2588
  this.fullScreen.set(true);
2589
+ this.storyContainer().nativeElement.style.width = '100%';
2590
+ this.storyContainer().nativeElement.style.height = '100%';
2591
+ this.storyContainer().nativeElement.style.top = '0';
2592
+ this.storyContainer().nativeElement.style.left = '0';
2551
2593
  }
2552
2594
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2553
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: StoriesComponent, isStandalone: true, selector: "stories", inputs: { stories: { classPropertyName: "stories", publicName: "stories", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, subFooterTemplate: { classPropertyName: "subFooterTemplate", publicName: "subFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, sideTemplate: { classPropertyName: "sideTemplate", publicName: "sideTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSubFooter: { classPropertyName: "showSubFooter", publicName: "showSubFooter", isSignal: true, isRequired: false, transformFunction: null }, descriptionOpen: { classPropertyName: "descriptionOpen", publicName: "descriptionOpen", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullScreen: "fullScreenChange", storyChanged: "storyChanged", paused: "pausedChange", close: "close" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"w-full h-full story-container \" [ngClass]=\"{ 'fixed top-0 left-0 z-52': fullScreen(),\r\n 'relative': !fullScreen()\r\n }\">\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"flex gap-1 story-lines p-2\">\r\n @for (story of stories(); track story.id; let i = $index) {\r\n <span class=\"hidden\">\r\n <p-button type=\"button\" (click)=\"closeCallback(story.id)\" rounded=\"true\" outlined=\"true\"\r\n styleClass=\"h-2rem w-2rem\"></p-button>\r\n </span>\r\n <div class=\"story-line\">\r\n <div class=\"story-line-inner\"\r\n [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"story-backdrop z-1\" (click)=\"next()\">\r\n @if (currentStory()?.type=='image') {\r\n <img [src]=\"currentStory().src\" />\r\n } @else if (currentStory()?.type=='video') {\r\n <video class=\"w-full\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n </video>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"story-content sm:border-round\">\r\n\r\n\r\n @if (currentStory()?.type == 'image') {\r\n <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n }\r\n @if (currentStory()?.type=='video') {\r\n <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n </video>\r\n }\r\n\r\n </div>\r\n <div class=\"top-7 right-5 z-3 absolute flex gap-2\">\r\n @if (currentStory()?.type=='video') {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"mute.set(!mute())\" style=\"color: inherit;\">\r\n @if(mute()) {\r\n <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n }\r\n @else {\r\n <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n }\r\n </a>\r\n </div>\r\n }\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"paused.set(!paused())\" style=\"color:inherit\">\r\n @if (paused()) {\r\n <i class=\"fi fi-rr-play text-2xl\"></i>\r\n }\r\n @else {\r\n <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n }\r\n\r\n </a>\r\n </div>\r\n @if(fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"emitClose()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-compress\"></i>\r\n </a>\r\n </div>\r\n }\r\n @if(!fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"setFullScreen()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-expand\"></i>\r\n </a>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-2 gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n @if(footerTemplate()){\r\n <div class=\"story-footer\">\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n </div>\r\n }\r\n\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines{position:absolute;width:100%;top:0;z-index:10}.story-line{background:#fff6;border-radius:6px;height:4px;flex:1}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i2$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }], encapsulation: i0.ViewEncapsulation.None });
2595
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: StoriesComponent, isStandalone: true, selector: "stories", inputs: { stories: { classPropertyName: "stories", publicName: "stories", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, subFooterTemplate: { classPropertyName: "subFooterTemplate", publicName: "subFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, sideTemplate: { classPropertyName: "sideTemplate", publicName: "sideTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSubFooter: { classPropertyName: "showSubFooter", publicName: "showSubFooter", isSignal: true, isRequired: false, transformFunction: null }, descriptionOpen: { classPropertyName: "descriptionOpen", publicName: "descriptionOpen", isSignal: true, isRequired: false, transformFunction: null }, fullScreen: { classPropertyName: "fullScreen", publicName: "fullScreen", isSignal: true, isRequired: false, transformFunction: null }, defaultDuration: { classPropertyName: "defaultDuration", publicName: "defaultDuration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fullScreen: "fullScreenChange", storyChanged: "storyChanged", paused: "pausedChange", close: "close" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true, isSignal: true }, { propertyName: "storyContainer", first: true, predicate: ["viewContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"w-full h-full story-container z-52\" #viewContainer>\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"story-lines-container\">\r\n <div class=\"flex gap-1 story-lines p-3 justify-center\">\r\n @for (story of stories(); track story.id; let i = $index) {\r\n\r\n <div class=\"story-line transition-all\" [ngClass]=\"{ 'story-line-selected' : currentStoryIndex() == i }\">\r\n @if (currentStoryIndex() >= i) {\r\n <div class=\"story-line-inner bg-surface-100\"\r\n [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"story-backdrop z-1\" (click)=\"next()\">\r\n @if (currentStory()?.type=='image') {\r\n <img [src]=\"currentStory().src\" />\r\n } @else if (currentStory()?.type=='video') {\r\n <video class=\"w-full\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n </video>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"story-content sm:border-round\">\r\n\r\n\r\n @if (currentStory()?.type == 'image') {\r\n <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n }\r\n @if (currentStory()?.type=='video') {\r\n <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n </video>\r\n }\r\n\r\n </div>\r\n <div class=\"top-7 right-5 z-3 absolute flex gap-2\">\r\n @if (currentStory()?.type=='video') {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"mute.set(!mute())\" style=\"color: inherit;\">\r\n @if(mute()) {\r\n <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n }\r\n @else {\r\n <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n }\r\n </a>\r\n </div>\r\n }\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"paused.set(!paused())\" style=\"color:inherit\">\r\n @if (paused()) {\r\n <i class=\"fi fi-rr-play text-2xl\"></i>\r\n }\r\n @else {\r\n <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n }\r\n\r\n </a>\r\n </div>\r\n @if(fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"emitClose()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-compress\"></i>\r\n </a>\r\n </div>\r\n }\r\n @if(!fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"setFullScreen()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-expand\"></i>\r\n </a>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-2 gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n @if(footerTemplate()){\r\n <div class=\"story-footer\">\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n </div>\r\n }\r\n\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines-container{position:absolute;top:0;z-index:10;width:100%;margin-inline:auto;text-align:center}.story-line{background:#fff6;border-radius:6px;height:8px;width:8px}.story-line-selected{width:50px}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:8px;min-width:8px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }], encapsulation: i0.ViewEncapsulation.None });
2554
2596
  }
2555
2597
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: StoriesComponent, decorators: [{
2556
2598
  type: Component,
2557
- args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full story-container \" [ngClass]=\"{ 'fixed top-0 left-0 z-52': fullScreen(),\r\n 'relative': !fullScreen()\r\n }\">\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"flex gap-1 story-lines p-2\">\r\n @for (story of stories(); track story.id; let i = $index) {\r\n <span class=\"hidden\">\r\n <p-button type=\"button\" (click)=\"closeCallback(story.id)\" rounded=\"true\" outlined=\"true\"\r\n styleClass=\"h-2rem w-2rem\"></p-button>\r\n </span>\r\n <div class=\"story-line\">\r\n <div class=\"story-line-inner\"\r\n [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"story-backdrop z-1\" (click)=\"next()\">\r\n @if (currentStory()?.type=='image') {\r\n <img [src]=\"currentStory().src\" />\r\n } @else if (currentStory()?.type=='video') {\r\n <video class=\"w-full\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n </video>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"story-content sm:border-round\">\r\n\r\n\r\n @if (currentStory()?.type == 'image') {\r\n <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n }\r\n @if (currentStory()?.type=='video') {\r\n <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n </video>\r\n }\r\n\r\n </div>\r\n <div class=\"top-7 right-5 z-3 absolute flex gap-2\">\r\n @if (currentStory()?.type=='video') {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"mute.set(!mute())\" style=\"color: inherit;\">\r\n @if(mute()) {\r\n <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n }\r\n @else {\r\n <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n }\r\n </a>\r\n </div>\r\n }\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"paused.set(!paused())\" style=\"color:inherit\">\r\n @if (paused()) {\r\n <i class=\"fi fi-rr-play text-2xl\"></i>\r\n }\r\n @else {\r\n <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n }\r\n\r\n </a>\r\n </div>\r\n @if(fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"emitClose()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-compress\"></i>\r\n </a>\r\n </div>\r\n }\r\n @if(!fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"setFullScreen()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-expand\"></i>\r\n </a>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-2 gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n @if(footerTemplate()){\r\n <div class=\"story-footer\">\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n </div>\r\n }\r\n\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines{position:absolute;width:100%;top:0;z-index:10}.story-line{background:#fff6;border-radius:6px;height:4px;flex:1}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:4px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"] }]
2558
- }], ctorParameters: () => [], propDecorators: { videoPlayer: [{
2559
- type: ViewChild,
2560
- args: ['videoPlayer', { read: ElementRef }]
2561
- }] } });
2599
+ args: [{ selector: 'stories', standalone: true, imports: [CommonModule, NgTemplateOutlet, ButtonModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"w-full h-full story-container z-52\" #viewContainer>\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"story-lines-container\">\r\n <div class=\"flex gap-1 story-lines p-3 justify-center\">\r\n @for (story of stories(); track story.id; let i = $index) {\r\n\r\n <div class=\"story-line transition-all\" [ngClass]=\"{ 'story-line-selected' : currentStoryIndex() == i }\">\r\n @if (currentStoryIndex() >= i) {\r\n <div class=\"story-line-inner bg-surface-100\"\r\n [style.width]=\"currentStoryIndex() > i ? '100%' : (currentStoryIndex() == i ? this.currentProgress() + '%' : '0')\">\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <div class=\"story-backdrop z-1\" (click)=\"next()\">\r\n @if (currentStory()?.type=='image') {\r\n <img [src]=\"currentStory().src\" />\r\n } @else if (currentStory()?.type=='video') {\r\n <video class=\"w-full\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n </video>\r\n }\r\n </div>\r\n\r\n\r\n <div class=\"story-content sm:border-round\">\r\n\r\n\r\n @if (currentStory()?.type == 'image') {\r\n <img [src]=\"currentStory().src\" (click)=\"next()\" />\r\n }\r\n @if (currentStory()?.type=='video') {\r\n <video class=\"w-full h-full\" (canplay)=\"videoPlayer.play()\" (loadedmetadata)=\"videoPlayer.muted = mute()\"\r\n #videoPlayer autoplay [muted]=\"mute()\" [playsInline]=\"true\" loop (click)=\"next()\">\r\n <source [src]=\"currentStory().src\" type=\"video/mp4\">\r\n\r\n </video>\r\n }\r\n\r\n </div>\r\n <div class=\"top-7 right-5 z-3 absolute flex gap-2\">\r\n @if (currentStory()?.type=='video') {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"mute.set(!mute())\" style=\"color: inherit;\">\r\n @if(mute()) {\r\n <i class=\"fi text-2xl fi-rr-volume-mute\"></i>\r\n }\r\n @else {\r\n <i class=\"fi text-2xl fi-rr-volume\"></i>\r\n }\r\n </a>\r\n </div>\r\n }\r\n\r\n @if(stories().length > 1) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"paused.set(!paused())\" style=\"color:inherit\">\r\n @if (paused()) {\r\n <i class=\"fi fi-rr-play text-2xl\"></i>\r\n }\r\n @else {\r\n <i class=\"fi fi-rr-pause text-2xl\"></i>\r\n }\r\n\r\n </a>\r\n </div>\r\n @if(fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"emitClose()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-compress\"></i>\r\n </a>\r\n </div>\r\n }\r\n @if(!fullScreen()) {\r\n <div class=\"w-12 h-12 rounded-full text-center content-center bg-surface-500/30 text-white\">\r\n <a (click)=\"setFullScreen()\" style=\"color: inherit;\">\r\n <i class=\"fi text-2xl fi-rr-expand\"></i>\r\n </a>\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n <div [class]=\"'story-overlay absolute bottom-0 p-2 left-0 z-2 gap-2 ' + (descriptionOpen() ? 'scrollable' : '')\">\r\n @if(footerTemplate()){\r\n <div class=\"story-footer\">\r\n <ng-container [ngTemplateOutlet]=\"footerTemplate()\"\r\n [ngTemplateOutletContext]=\"{ $implicit: currentStory() }\"></ng-container>\r\n </div>\r\n }\r\n\r\n\r\n\r\n </div>\r\n\r\n\r\n\r\n</div>", styles: [".story-content{z-index:1;background-repeat:no-repeat;position:absolute;overflow:hidden;object-fit:contain;text-align:center;align-content:center;width:100%;height:100%}.story-container{min-height:300px;overflow:hidden}.story-backdrop{background-color:#000;position:absolute;left:0;top:0;width:100%;height:100%;filter:blur(20px) brightness(60%);text-align:center;align-content:center;overflow:hidden}.story-backdrop video,.story-backdrop img{object-fit:cover;display:inline-block;width:100%;height:100%}.story-content video,.story-content img{object-fit:contain;display:inline-block;width:100%;height:100%}.story-content img{width:100%}.story-lines-container{position:absolute;top:0;z-index:10;width:100%;margin-inline:auto;text-align:center}.story-line{background:#fff6;border-radius:6px;height:8px;width:8px}.story-line-selected{width:50px}.story-footer{color:#fff;flex:1;min-width:0}p-skeleton .p-skeleton{background-color:#373737cc}.story-overlay{color:#fff;text-shadow:0 0px 3px rgba(0,0,0)}.story-side{text-align:center}.story-side .side-icon{font-size:24px}.story-line-inner{background:#fff;border-radius:6px;height:8px;min-width:8px;transition:width .1s}.story-container{background-color:#000}.story-overlay.scrollable{height:90%;padding-top:0}.story-overlay.scrollable .story-footer{height:100%;overflow-y:auto}.story-overlay.scrollable .story-description{height:initial}.story-footer::-webkit-scrollbar{display:none}@media (max-width: 567px){.story-content{width:100%;height:100%;border-radius:0;background-color:transparent;margin:0}}.story-controls{top:10px;right:10px;position:absolute;z-index:3}\n"] }]
2600
+ }], ctorParameters: () => [] });
2562
2601
 
2563
2602
  // import { UUID } from 'angular2-uuid';
2564
2603
  // import { environment } from 'environments/environment';
@@ -2684,13 +2723,13 @@ class LoginComponent {
2684
2723
  // window.login.userLoggedIn(this.userService.currentUser);
2685
2724
  // });
2686
2725
  }
2687
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, deps: [{ token: UserAccountService }, { token: GlobalService }, { token: i2$4.Router }], target: i0.ɵɵFactoryTarget.Component });
2726
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, deps: [{ token: UserAccountService }, { token: GlobalService }, { token: i2$3.Router }], target: i0.ɵɵFactoryTarget.Component });
2688
2727
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.2", type: LoginComponent, isStandalone: true, selector: "app-login", ngImport: i0, template: "<!-- <app-loader></app-loader> -->\r\n<div style=\"max-width:400px; width:90%; margin: 0px auto\">\r\n <payvent-login-form></payvent-login-form>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: LoginFormComponent, selector: "payvent-login-form", inputs: ["tokenType", "clientId", "type"] }] });
2689
2728
  }
2690
2729
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
2691
2730
  type: Component,
2692
2731
  args: [{ selector: 'app-login', standalone: true, imports: [LoginFormComponent], template: "<!-- <app-loader></app-loader> -->\r\n<div style=\"max-width:400px; width:90%; margin: 0px auto\">\r\n <payvent-login-form></payvent-login-form>\r\n</div>" }]
2693
- }], ctorParameters: () => [{ type: UserAccountService }, { type: GlobalService }, { type: i2$4.Router }] });
2732
+ }], ctorParameters: () => [{ type: UserAccountService }, { type: GlobalService }, { type: i2$3.Router }] });
2694
2733
 
2695
2734
  // export * from './loading-button/loading-button.component';
2696
2735
  // export * from './location-select/location-select.component';