@eduboxpro/studio 0.1.34 → 0.1.35

package/fesm2022/eduboxpro-studio.mjs

@@ -11,6 +11,7 @@ import * as i1$2 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms';
 import { autoUpdate, offset, flip, shift, arrow, computePosition } from '@floating-ui/dom';
 import { trigger, state, transition, style, animate } from '@angular/animations';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /**
  * Injection token for Studio configuration
@@ -7232,6 +7233,241 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
   `, styles: [":host{display:inline-block}:host(.studio-button-toggle-group--disabled){opacity:.6;pointer-events:none}\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], allowEmpty: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowEmpty", required: false }] }], orientationInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], sizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variantInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], colorInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], radiusInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], shadowInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], attached: [{ type: i0.Input, args: [{ isSignal: true, alias: "attached", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], iconPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPosition", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
+/**
+ * FileViewer configuration types
+ */
+const defaultFileViewerLabels = {
+    videoLabel: 'Video',
+    audioLabel: 'Audio',
+    browserNotSupported: 'Your browser does not support this media'
+};
+
+class FileViewerComponent {
+    sanitizer = inject(DomSanitizer);
+    visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : []));
+    fileUrl = input('', ...(ngDevMode ? [{ debugName: "fileUrl" }] : []));
+    fileName = input('', ...(ngDevMode ? [{ debugName: "fileName" }] : []));
+    fileType = input('', ...(ngDevMode ? [{ debugName: "fileType" }] : []));
+    labels = input({}, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+    close = output();
+    resolvedLabels = computed(() => ({
+        ...defaultFileViewerLabels,
+        ...this.labels()
+    }), ...(ngDevMode ? [{ debugName: "resolvedLabels" }] : []));
+    isPdf = computed(() => {
+        const type = this.fileType();
+        return type?.includes('pdf') || type === 'PDF';
+    }, ...(ngDevMode ? [{ debugName: "isPdf" }] : []));
+    isImage = computed(() => {
+        const type = this.fileType();
+        return type?.startsWith('image/') || type === 'IMAGE';
+    }, ...(ngDevMode ? [{ debugName: "isImage" }] : []));
+    isAudio = computed(() => {
+        const type = this.fileType();
+        return type?.startsWith('audio/') || type === 'AUDIO';
+    }, ...(ngDevMode ? [{ debugName: "isAudio" }] : []));
+    isVideo = computed(() => {
+        const type = this.fileType();
+        return type?.startsWith('video/') || type === 'VIDEO';
+    }, ...(ngDevMode ? [{ debugName: "isVideo" }] : []));
+    fileIcon = computed(() => {
+        const type = this.fileType();
+        if (this.isPdf())
+            return 'file-text';
+        if (this.isImage())
+            return 'image';
+        if (this.isAudio())
+            return 'music';
+        if (this.isVideo())
+            return 'video';
+        if (type?.includes('word') || type?.includes('document'))
+            return 'file-text';
+        if (type?.includes('excel') || type?.includes('spreadsheet'))
+            return 'table';
+        if (type?.includes('powerpoint') || type?.includes('presentation'))
+            return 'presentation';
+        return 'file';
+    }, ...(ngDevMode ? [{ debugName: "fileIcon" }] : []));
+    safeUrl = computed(() => {
+        const url = this.fileUrl();
+        if (!url || this.isPdf() || this.isVideo() || this.isImage() || this.isAudio())
+            return null;
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }, ...(ngDevMode ? [{ debugName: "safeUrl" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: FileViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: FileViewerComponent, isStandalone: true, selector: "studio-file-viewer", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, fileUrl: { classPropertyName: "fileUrl", publicName: "fileUrl", isSignal: true, isRequired: false, transformFunction: null }, fileName: { classPropertyName: "fileName", publicName: "fileName", isSignal: true, isRequired: false, transformFunction: null }, fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, ngImport: i0, template: `
+    @if (visible()) {
+      @if (isVideo()) {
+        <div class="studio-file-viewer studio-file-viewer--video">
+          <div class="studio-file-viewer__header studio-file-viewer__header--video">
+            <button
+              (click)="close.emit()"
+              class="studio-file-viewer__back-btn"
+              type="button"
+            >
+              <studio-icon name="arrow-left" [size]="22" />
+            </button>
+            <div class="studio-file-viewer__title-wrapper">
+              <h1 class="studio-file-viewer__title studio-file-viewer__title--light">{{ fileName() }}</h1>
+              <p class="studio-file-viewer__subtitle">{{ resolvedLabels().videoLabel }}</p>
+            </div>
+          </div>
+          <div class="studio-file-viewer__video-container">
+            <video
+              [src]="fileUrl()"
+              controls
+              controlslist="nodownload"
+              playsinline
+              autoplay
+              class="studio-file-viewer__video"
+            >
+              {{ resolvedLabels().browserNotSupported }}
+            </video>
+          </div>
+        </div>
+      } @else {
+        <div
+          class="studio-file-viewer studio-file-viewer--modal"
+          (click)="close.emit()"
+        >
+          <div
+            class="studio-file-viewer__content"
+            (click)="$event.stopPropagation()"
+          >
+            <div class="studio-file-viewer__header">
+              <div class="studio-file-viewer__title-wrapper studio-file-viewer__title-wrapper--row">
+                <studio-icon [name]="fileIcon()" [size]="20" class="studio-file-viewer__icon" />
+                <h3 class="studio-file-viewer__title">{{ fileName() }}</h3>
+              </div>
+              <button
+                (click)="close.emit()"
+                class="studio-file-viewer__close-btn"
+                type="button"
+              >
+                <studio-icon name="x" [size]="20" />
+              </button>
+            </div>
+            <div class="studio-file-viewer__body">
+              @if (isPdf()) {
+                <ng-content select="[pdfViewer]"></ng-content>
+              } @else if (isImage()) {
+                <div class="studio-file-viewer__image-container">
+                  <img
+                    [src]="fileUrl()"
+                    [alt]="fileName()"
+                    class="studio-file-viewer__image"
+                  />
+                </div>
+              } @else if (isAudio()) {
+                <div class="studio-file-viewer__audio-container">
+                  <div class="studio-file-viewer__audio-icon-wrapper">
+                    <studio-icon name="music" [size]="32" />
+                  </div>
+                  <p class="studio-file-viewer__audio-title">{{ fileName() }}</p>
+                  <audio [src]="fileUrl()" controls controlslist="nodownload" class="studio-file-viewer__audio"></audio>
+                </div>
+              } @else if (safeUrl()) {
+                <iframe
+                  [src]="safeUrl()"
+                  class="studio-file-viewer__iframe"
+                  allowfullscreen
+                ></iframe>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    }
+  `, isInline: true, styles: [".studio-file-viewer{position:fixed;inset:0;z-index:50;&--video{background:#000;display:flex;flex-direction:column}&--modal{display:flex;align-items:center;justify-content:center;background:#000000b3}&__header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--studio-border-color, #e5e7eb);&--video{background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.5rem .75rem;border-bottom:none;padding-top:env(safe-area-inset-top)}}&__back-btn{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s;&:hover{background:#ffffff1a}}&__close-btn{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;color:var(--studio-text-secondary, #6b7280);background:transparent;border:none;border-radius:.5rem;cursor:pointer;flex-shrink:0;transition:background-color .2s;&:hover{background:var(--studio-bg-secondary, #f3f4f6)}}&__title-wrapper{flex:1;min-width:0;&--row{display:flex;align-items:center;gap:.75rem}}&__title{font-weight:600;font-size:.875rem;color:var(--studio-text-primary, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;&--light{color:#fff}}&__subtitle{font-size:.75rem;color:#9ca3af;margin:0}&__icon{color:var(--studio-text-secondary, #6b7280);flex-shrink:0}&__content{background:var(--studio-bg-primary, white);border-radius:.75rem;width:95vw;height:90vh;max-width:72rem;display:flex;flex-direction:column}&__body{flex:1;overflow:hidden}&__video-container{flex:1;display:flex;align-items:center;justify-content:center;background:#000}&__video{width:100%;height:100%;object-fit:contain}&__image-container{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;background:var(--studio-bg-secondary, #f9fafb)}&__image{max-width:100%;max-height:100%;object-fit:contain;border-radius:.5rem}&__audio-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:var(--studio-bg-secondary, #f9fafb);text-align:center}&__audio-icon-wrapper{width:5rem;height:5rem;border-radius:50%;background:var(--studio-primary-light, #dbeafe);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--studio-primary, #3b82f6)}&__audio-title{font-weight:500;color:var(--studio-text-primary, #111827);margin-bottom:1rem}&__audio{width:20rem}&__iframe{width:100%;height:100%;border:none}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "studio-icon", inputs: ["name", "size", "color", "strokeWidth", "absoluteStrokeWidth", "showFallback", "fallbackIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: FileViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'studio-file-viewer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IconComponent], template: `
+    @if (visible()) {
+      @if (isVideo()) {
+        <div class="studio-file-viewer studio-file-viewer--video">
+          <div class="studio-file-viewer__header studio-file-viewer__header--video">
+            <button
+              (click)="close.emit()"
+              class="studio-file-viewer__back-btn"
+              type="button"
+            >
+              <studio-icon name="arrow-left" [size]="22" />
+            </button>
+            <div class="studio-file-viewer__title-wrapper">
+              <h1 class="studio-file-viewer__title studio-file-viewer__title--light">{{ fileName() }}</h1>
+              <p class="studio-file-viewer__subtitle">{{ resolvedLabels().videoLabel }}</p>
+            </div>
+          </div>
+          <div class="studio-file-viewer__video-container">
+            <video
+              [src]="fileUrl()"
+              controls
+              controlslist="nodownload"
+              playsinline
+              autoplay
+              class="studio-file-viewer__video"
+            >
+              {{ resolvedLabels().browserNotSupported }}
+            </video>
+          </div>
+        </div>
+      } @else {
+        <div
+          class="studio-file-viewer studio-file-viewer--modal"
+          (click)="close.emit()"
+        >
+          <div
+            class="studio-file-viewer__content"
+            (click)="$event.stopPropagation()"
+          >
+            <div class="studio-file-viewer__header">
+              <div class="studio-file-viewer__title-wrapper studio-file-viewer__title-wrapper--row">
+                <studio-icon [name]="fileIcon()" [size]="20" class="studio-file-viewer__icon" />
+                <h3 class="studio-file-viewer__title">{{ fileName() }}</h3>
+              </div>
+              <button
+                (click)="close.emit()"
+                class="studio-file-viewer__close-btn"
+                type="button"
+              >
+                <studio-icon name="x" [size]="20" />
+              </button>
+            </div>
+            <div class="studio-file-viewer__body">
+              @if (isPdf()) {
+                <ng-content select="[pdfViewer]"></ng-content>
+              } @else if (isImage()) {
+                <div class="studio-file-viewer__image-container">
+                  <img
+                    [src]="fileUrl()"
+                    [alt]="fileName()"
+                    class="studio-file-viewer__image"
+                  />
+                </div>
+              } @else if (isAudio()) {
+                <div class="studio-file-viewer__audio-container">
+                  <div class="studio-file-viewer__audio-icon-wrapper">
+                    <studio-icon name="music" [size]="32" />
+                  </div>
+                  <p class="studio-file-viewer__audio-title">{{ fileName() }}</p>
+                  <audio [src]="fileUrl()" controls controlslist="nodownload" class="studio-file-viewer__audio"></audio>
+                </div>
+              } @else if (safeUrl()) {
+                <iframe
+                  [src]="safeUrl()"
+                  class="studio-file-viewer__iframe"
+                  allowfullscreen
+                ></iframe>
+              }
+            </div>
+          </div>
+        </div>
+      }
+    }
+  `, styles: [".studio-file-viewer{position:fixed;inset:0;z-index:50;&--video{background:#000;display:flex;flex-direction:column}&--modal{display:flex;align-items:center;justify-content:center;background:#000000b3}&__header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid var(--studio-border-color, #e5e7eb);&--video{background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:.5rem .75rem;border-bottom:none;padding-top:env(safe-area-inset-top)}}&__back-btn{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;color:#fff;background:transparent;border:none;border-radius:50%;cursor:pointer;transition:background-color .2s;&:hover{background:#ffffff1a}}&__close-btn{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;color:var(--studio-text-secondary, #6b7280);background:transparent;border:none;border-radius:.5rem;cursor:pointer;flex-shrink:0;transition:background-color .2s;&:hover{background:var(--studio-bg-secondary, #f3f4f6)}}&__title-wrapper{flex:1;min-width:0;&--row{display:flex;align-items:center;gap:.75rem}}&__title{font-weight:600;font-size:.875rem;color:var(--studio-text-primary, #111827);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;&--light{color:#fff}}&__subtitle{font-size:.75rem;color:#9ca3af;margin:0}&__icon{color:var(--studio-text-secondary, #6b7280);flex-shrink:0}&__content{background:var(--studio-bg-primary, white);border-radius:.75rem;width:95vw;height:90vh;max-width:72rem;display:flex;flex-direction:column}&__body{flex:1;overflow:hidden}&__video-container{flex:1;display:flex;align-items:center;justify-content:center;background:#000}&__video{width:100%;height:100%;object-fit:contain}&__image-container{display:flex;align-items:center;justify-content:center;height:100%;padding:1rem;background:var(--studio-bg-secondary, #f9fafb)}&__image{max-width:100%;max-height:100%;object-fit:contain;border-radius:.5rem}&__audio-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;background:var(--studio-bg-secondary, #f9fafb);text-align:center}&__audio-icon-wrapper{width:5rem;height:5rem;border-radius:50%;background:var(--studio-primary-light, #dbeafe);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--studio-primary, #3b82f6)}&__audio-title{font-weight:500;color:var(--studio-text-primary, #111827);margin-bottom:1rem}&__audio{width:20rem}&__iframe{width:100%;height:100%;border:none}}\n"] }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], fileUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileUrl", required: false }] }], fileName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileName", required: false }] }], fileType: [{ type: i0.Input, args: [{ isSignal: true, alias: "fileType", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], close: [{ type: i0.Output, args: ["close"] }] } });
+
 class InspectorComponent {
     configService = inject(StudioConfigService);
     componentSize = input('sm', ...(ngDevMode ? [{ debugName: "componentSize" }] : []));
@@ -8003,5 +8239,5 @@ function hasChildren(block) {
  * Generated bundle index. Do not edit.
  */
 
-export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, SignalStore, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, ToastComponent, ToastService, TooltipComponent, classNames, hasChildren, isContentBlock, isFormBlock, isInteractiveBlock, isLayoutBlock, isSafeUrl, isStudioBlock, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
+export { BadgeComponent, BadgeWrapperComponent, BottomNavigationComponent, ButtonComponent, ButtonGroupComponent, ButtonToggleGroupComponent, COUNTRY_OPTIONS, CardComponent, ChatComponent, ChatInputComponent, ChatMessageComponent, CheckboxComponent, ColorPickerCompactComponent, ColorPickerComponent, ConfirmDialogComponent, ConfirmDialogService, DEFAULT_COLOR_PRESETS, DrawerComponent, DrawerService, DropdownComponent, FileViewerComponent, IconComponent, InputComponent, InspectorComponent, MASK_PRESETS, MaskDirective, MaskEngine, MenuComponent, ModalComponent, NavbarComponent, PaginationComponent, PhoneInputComponent, PopoverComponent, RadioButtonComponent, STUDIO_CONFIG, SelectComponent, SidebarComponent, SignalStore, StudioConfigService, SwitchComponent, TableColumnDirective, TableComponent, TabsComponent, TextareaComponent, ThemeSwitchComponent, ToastComponent, ToastService, TooltipComponent, classNames, defaultFileViewerLabels, hasChildren, isContentBlock, isFormBlock, isInteractiveBlock, isLayoutBlock, isSafeUrl, isStudioBlock, loadGoogleFont, loadGoogleFonts, provideStudioConfig, provideStudioIcons, sanitizeUrl, withConfigDefault };
 //# sourceMappingURL=eduboxpro-studio.mjs.map