@eduboxpro/studio 0.1.34 → 0.1.36

package/fesm2022/eduboxpro-studio.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, untracked, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, Renderer2, TemplateRef, ContentChild, Input, Directive, contentChildren } from '@angular/core';
+import { InjectionToken, inject, signal, effect, Injectable, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, input, computed, ChangeDetectionStrategy, Component, untracked, output, PLATFORM_ID, ElementRef, contentChild, viewChild, forwardRef, DOCUMENT as DOCUMENT$1, DestroyRef, Injector, model, afterNextRender, HostListener, Renderer2, TemplateRef, ContentChild, Input, Directive, contentChildren, ViewEncapsulation } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser, NgTemplateOutlet } from '@angular/common';
 import * as LucideIcons from 'lucide-angular';
@@ -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" }] : []));
@@ -7441,6 +7677,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     }, template: "@if (values()) {\n  <div class=\"studio-inspector__container\">\n    @for (section of values()!.sections; track trackBySectionId($index, section)) {\n      <div class=\"studio-inspector__section\"\n           [class.studio-inspector__section--expanded]=\"isSectionExpanded(section.id)\"\n           [class.studio-inspector__section--collapsed]=\"!isSectionExpanded(section.id)\">\n\n        <studio-button\n          variant=\"ghost\"\n          [fullWidth]=\"true\"\n          class=\"studio-inspector__section-header\"\n          [class.studio-inspector__section-header--collapsible]=\"collapsible()\"\n          [disabled]=\"!collapsible()\"\n          [attr.aria-expanded]=\"isSectionExpanded(section.id)\"\n          [attr.aria-controls]=\"'section-content-' + section.id\"\n          (click)=\"toggleSection(section.id)\">\n\n          @if (showIcons() && section.icon) {\n            <studio-icon\n              [name]=\"section.icon\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-icon\"\n            />\n          }\n\n          <span class=\"studio-inspector__section-title\">{{ section.title }}</span>\n\n          @if (collapsible()) {\n            <studio-icon\n              [name]=\"'chevron-down'\"\n              [size]=\"16\"\n              class=\"studio-inspector__section-toggle\"\n            />\n          }\n        </studio-button>\n\n        @if (isSectionExpanded(section.id)) {\n          <div\n            class=\"studio-inspector__section-content\"\n            [id]=\"'section-content-' + section.id\">\n\n            @if (section.groups) {\n              @for (group of section.groups; track trackByGroupId($index, group); let isLast = $last) {\n                <div class=\"studio-inspector__group\">\n\n                  @if (showGroupLabels() && group.label) {\n                    <div class=\"studio-inspector__group-label\">{{ group.label }}</div>\n                  }\n\n                  @for (param of group.parameters; track trackByParameterId($index, param)) {\n                    <div class=\"studio-inspector__parameter\">\n                      @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                        <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                      }\n\n                      @if (param.type === 'text') {\n                        <studio-input\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'number') {\n                        <div class=\"studio-inspector__number-input\">\n                          <studio-input\n                            type=\"number\"\n                            [ngModel]=\"param.value\"\n                            [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                            (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                            [variant]=\"componentVariant()\"\n                            [size]=\"componentSize()\"\n                            [min]=\"param.min\"\n                            [max]=\"param.max\"\n                            [step]=\"param.step\"\n                            [disabled]=\"param.disabled || false\"\n                            [readonly]=\"param.readonly || false\"\n                            [fullWidth]=\"fullWidth()\"\n                          />\n                          @if (param.suffix) {\n                            <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'textarea') {\n                        <studio-textarea\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [readonly]=\"param.readonly || false\"\n                          [maxLength]=\"param.maxLength\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'color') {\n                        <studio-color-picker-compact\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'select') {\n                        <studio-select\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [variant]=\"componentVariant()\"\n                          [size]=\"componentSize()\"\n                          [options]=\"param.options || []\"\n                          [placeholder]=\"param.placeholder || ''\"\n                          [disabled]=\"param.disabled || false\"\n                          [fullWidth]=\"fullWidth()\"\n                        />\n                      }\n\n                      @if (param.type === 'boolean') {\n                        <studio-switch\n                          [ngModel]=\"param.value\"\n                          [name]=\"section.id + '-' + group.id + '-' + param.id\"\n                          (ngModelChange)=\"onParameterChange(section.id, group.id, param.id, $event)\"\n                          [label]=\"param.label\"\n                          [size]=\"componentSize()\"\n                          [disabled]=\"param.disabled || false\"\n                        />\n                      }\n\n                      @if (param.type === 'checkbox') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <studio-checkbox\n                              [ngModel]=\"isChecked(param, option.value)\"\n                              [name]=\"section.id + '-' + group.id + '-' + param.id + '-' + option.value\"\n                              (ngModelChange)=\"onCheckboxChange(section.id, group.id, param.id, option.value, $event)\"\n                              [label]=\"option.label\"\n                              [disabled]=\"param.disabled || option.disabled || false\"\n                              [size]=\"componentSize()\"\n                            />\n                          }\n                        </div>\n                      }\n\n                      @if (param.type === 'radio') {\n                        <div class=\"studio-inspector__options\">\n                          @for (option of param.options; track trackByOptionValue($index, option)) {\n                            <div class=\"studio-inspector__option\">\n                              <studio-radio-button\n                                [ngModel]=\"param.value\"\n                                (ngModelChange)=\"onRadioChange(section.id, group.id, param.id, $event)\"\n                                [value]=\"option.value\"\n                                [label]=\"option.label\"\n                                [name]=\"getRadioName(section.id, group.id, param.id)\"\n                                [disabled]=\"param.disabled || option.disabled || false\"\n                                [size]=\"componentSize()\"\n                              />\n                              @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                                <span class=\"studio-inspector__default-indicator\">(default)</span>\n                              }\n                            </div>\n                          }\n                        </div>\n                      }\n\n                      @if (param.hint) {\n                        <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                      }\n                    </div>\n                  }\n\n                  @if (!isLast && groupDivider() !== 'none') {\n                    <div class=\"studio-inspector__group-divider\"\n                         [class.studio-inspector__group-divider--line]=\"groupDivider() === 'line'\"\n                         [class.studio-inspector__group-divider--space]=\"groupDivider() === 'space'\">\n                    </div>\n                  }\n                </div>\n              }\n            }\n\n            @if (section.parameters) {\n              @for (param of section.parameters; track trackByParameterId($index, param)) {\n                <div class=\"studio-inspector__parameter\">\n                  @if (param.type !== 'boolean' && param.type !== 'checkbox' && param.type !== 'radio') {\n                    <div class=\"studio-inspector__parameter-label\">{{ param.label }}</div>\n                  }\n\n                  @if (param.type === 'text') {\n                    <studio-input\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'number') {\n                    <div class=\"studio-inspector__number-input\">\n                      <studio-input\n                        type=\"number\"\n                        [ngModel]=\"param.value\"\n                        [name]=\"section.id + '-' + param.id\"\n                        (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                        [variant]=\"componentVariant()\"\n                        [size]=\"componentSize()\"\n                        [min]=\"param.min\"\n                        [max]=\"param.max\"\n                        [step]=\"param.step\"\n                        [disabled]=\"param.disabled || false\"\n                        [readonly]=\"param.readonly || false\"\n                        [fullWidth]=\"fullWidth()\"\n                      />\n                      @if (param.suffix) {\n                        <span class=\"studio-inspector__suffix\">{{ param.suffix }}</span>\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'textarea') {\n                    <studio-textarea\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [readonly]=\"param.readonly || false\"\n                      [maxLength]=\"param.maxLength\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'color') {\n                    <studio-color-picker-compact\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'select') {\n                    <studio-select\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [variant]=\"componentVariant()\"\n                      [size]=\"componentSize()\"\n                      [options]=\"param.options || []\"\n                      [placeholder]=\"param.placeholder || ''\"\n                      [disabled]=\"param.disabled || false\"\n                      [fullWidth]=\"fullWidth()\"\n                    />\n                  }\n\n                  @if (param.type === 'boolean') {\n                    <studio-switch\n                      [ngModel]=\"param.value\"\n                      [name]=\"section.id + '-' + param.id\"\n                      (ngModelChange)=\"onParameterChange(section.id, null, param.id, $event)\"\n                      [label]=\"param.label\"\n                      [size]=\"componentSize()\"\n                      [disabled]=\"param.disabled || false\"\n                    />\n                  }\n\n                  @if (param.type === 'checkbox') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <studio-checkbox\n                          [ngModel]=\"isChecked(param, option.value)\"\n                          [name]=\"section.id + '-' + param.id + '-' + option.value\"\n                          (ngModelChange)=\"onCheckboxChange(section.id, null, param.id, option.value, $event)\"\n                          [label]=\"option.label\"\n                          [disabled]=\"param.disabled || option.disabled || false\"\n                          [size]=\"componentSize()\"\n                        />\n                      }\n                    </div>\n                  }\n\n                  @if (param.type === 'radio') {\n                    <div class=\"studio-inspector__options\">\n                      @for (option of param.options; track trackByOptionValue($index, option)) {\n                        <div class=\"studio-inspector__option\">\n                          <studio-radio-button\n                            [ngModel]=\"param.value\"\n                            (ngModelChange)=\"onRadioChange(section.id, null, param.id, $event)\"\n                            [value]=\"option.value\"\n                            [label]=\"option.label\"\n                            [name]=\"getRadioName(section.id, null, param.id)\"\n                            [disabled]=\"param.disabled || option.disabled || false\"\n                            [size]=\"componentSize()\"\n                          />\n                          @if (showDefaultIndicator() && isDefault(param, option.value)) {\n                            <span class=\"studio-inspector__default-indicator\">(default)</span>\n                          }\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  @if (param.hint) {\n                    <div class=\"studio-inspector__parameter-hint\">{{ param.hint }}</div>\n                  }\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [":host{display:block;font-family:var(--studio-font-family)}.studio-inspector__container{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__section{background:var(--studio-bg-primary);border:1px solid var(--studio-border-primary);border-radius:var(--studio-radius-md);overflow:hidden}.studio-inspector__section-header{width:100%;display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;background:var(--studio-bg-secondary);border:none;border-bottom:1px solid var(--studio-border-primary);cursor:pointer;transition:background var(--studio-transition-fast);text-align:left}.studio-inspector__section-header--collapsible:hover{background:var(--studio-bg-tertiary)}.studio-inspector__section-header:disabled{cursor:default}.studio-inspector__section-icon{color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__section-title{flex:1;font-size:.875rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-primary)}.studio-inspector__section-toggle{color:var(--studio-text-secondary);flex-shrink:0;transition:transform var(--studio-transition-fast)}.studio-inspector__section--collapsed .studio-inspector__section-toggle{transform:rotate(-90deg)}.studio-inspector__section--collapsed .studio-inspector__section-content{display:none}.studio-inspector__section--expanded .studio-inspector__section-toggle{transform:rotate(0)}.studio-inspector__section-content{padding:1rem;display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group{display:flex;flex-direction:column;gap:.75rem}.studio-inspector__group-label{font-size:.75rem;font-weight:var(--studio-font-weight-semibold);color:var(--studio-text-secondary);text-transform:uppercase;letter-spacing:.05em}.studio-inspector__group-divider--line{height:1px;background:var(--studio-border-primary);margin:.5rem 0}.studio-inspector__group-divider--space{height:.5rem}.studio-inspector__parameter{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__parameter-label{font-size:.8125rem;font-weight:var(--studio-font-weight-medium);color:var(--studio-text-primary)}.studio-inspector__parameter-hint{font-size:.75rem;color:var(--studio-text-secondary);line-height:1.4}.studio-inspector__number-input{display:flex;align-items:center;gap:.5rem}.studio-inspector__suffix{font-size:.875rem;color:var(--studio-text-secondary);flex-shrink:0}.studio-inspector__options{display:flex;flex-direction:column;gap:.5rem}.studio-inspector__option{display:flex;align-items:center;gap:.5rem}.studio-inspector__default-indicator{font-size:.75rem;color:var(--studio-text-tertiary);font-style:italic}:host(.studio-inspector--compact) .studio-inspector__container{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__section-header{padding:.625rem .75rem}:host(.studio-inspector--compact) .studio-inspector__section-content{padding:.75rem;gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--compact) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-sm) .studio-inspector__section-content{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__group{gap:.5rem}:host(.studio-inspector--spacing-sm) .studio-inspector__parameter{gap:.375rem}:host(.studio-inspector--spacing-lg) .studio-inspector__section-content{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group{gap:1rem}:host(.studio-inspector--spacing-lg) .studio-inspector__parameter{gap:.625rem}:host(.studio-inspector--spacing-lg) .studio-inspector__group-divider--space{height:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { componentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentSize", required: false }] }], componentVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "componentVariant", required: false }] }], compact: [{ type: i0.Input, args: [{ isSignal: true, alias: "compact", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showDefaultIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDefaultIndicator", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], expandedByDefault: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedByDefault", required: false }] }], expandedSectionsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedSections", required: false }] }], showGroupLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGroupLabels", required: false }] }], groupDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupDivider", required: false }] }], groupDividerSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupDividerSpacing", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], sectionTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionTemplate", required: false }] }], parameterTemplates: [{ type: i0.Input, args: [{ isSignal: true, alias: "parameterTemplates", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaDescribedBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedBy", required: false }] }], sectionToggled: [{ type: i0.Output, args: ["sectionToggled"] }], parameterFocused: [{ type: i0.Output, args: ["parameterFocused"] }], parameterBlurred: [{ type: i0.Output, args: ["parameterBlurred"] }] } });
 
+class LogoComponent {
+    /** URL to navigate when logo is clicked */
+    link = input('/', ...(ngDevMode ? [{ debugName: "link" }] : []));
+    /** Path to logo image */
+    logoSrc = input.required(...(ngDevMode ? [{ debugName: "logoSrc" }] : []));
+    /** Text to display next to logo */
+    logoText = input.required(...(ngDevMode ? [{ debugName: "logoText" }] : []));
+    /** Size variant */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : []));
+    /** Whether to show text */
+    showText = input(true, ...(ngDevMode ? [{ debugName: "showText" }] : []));
+    /** Whether to show text on mobile devices */
+    showTextOnMobile = input(false, ...(ngDevMode ? [{ debugName: "showTextOnMobile" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LogoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: LogoComponent, isStandalone: true, selector: "ui-logo", inputs: { link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, logoSrc: { classPropertyName: "logoSrc", publicName: "logoSrc", isSignal: true, isRequired: true, transformFunction: null }, logoText: { classPropertyName: "logoText", publicName: "logoText", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showText: { classPropertyName: "showText", publicName: "showText", isSignal: true, isRequired: false, transformFunction: null }, showTextOnMobile: { classPropertyName: "showTextOnMobile", publicName: "showTextOnMobile", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <a
+      class="logo"
+      [class.logo--sm]="size() === 'sm'"
+      [class.logo--md]="size() === 'md'"
+      [class.logo--lg]="size() === 'lg'"
+      [routerLink]="link()"
+    >
+      <img [src]="logoSrc()" alt="Logo" class="logo__image" />
+      @if (showText()) {
+        <span
+          class="logo__text"
+          [class.logo__text--hide-mobile]="!showTextOnMobile()"
+        >
+          {{ logoText() }}
+        </span>
+      }
+    </a>
+  `, isInline: true, styles: [".logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;outline:none}.logo:focus-visible{outline:2px solid var(--ui-focus-ring, currentColor);outline-offset:2px;border-radius:4px}.logo__image{height:2rem;width:auto}.logo--sm .logo__image{height:1.5rem}.logo--lg .logo__image{height:2.5rem}.logo__text{font-weight:600;font-size:1.125rem;white-space:nowrap}.logo--sm .logo__text{font-size:1rem}.logo--lg .logo__text{font-size:1.25rem}@media (max-width: 768px){.logo__text--hide-mobile{display:none}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: LogoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-logo', standalone: true, imports: [RouterLink], template: `
+    <a
+      class="logo"
+      [class.logo--sm]="size() === 'sm'"
+      [class.logo--md]="size() === 'md'"
+      [class.logo--lg]="size() === 'lg'"
+      [routerLink]="link()"
+    >
+      <img [src]="logoSrc()" alt="Logo" class="logo__image" />
+      @if (showText()) {
+        <span
+          class="logo__text"
+          [class.logo__text--hide-mobile]="!showTextOnMobile()"
+        >
+          {{ logoText() }}
+        </span>
+      }
+    </a>
+  `, encapsulation: ViewEncapsulation.Emulated, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:inherit;outline:none}.logo:focus-visible{outline:2px solid var(--ui-focus-ring, currentColor);outline-offset:2px;border-radius:4px}.logo__image{height:2rem;width:auto}.logo--sm .logo__image{height:1.5rem}.logo--lg .logo__image{height:2.5rem}.logo__text{font-weight:600;font-size:1.125rem;white-space:nowrap}.logo--sm .logo__text{font-size:1rem}.logo--lg .logo__text{font-size:1.25rem}@media (max-width: 768px){.logo__text--hide-mobile{display:none}}\n"] }]
+        }], propDecorators: { link: [{ type: i0.Input, args: [{ isSignal: true, alias: "link", required: false }] }], logoSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoSrc", required: true }] }], logoText: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoText", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], showText: [{ type: i0.Input, args: [{ isSignal: true, alias: "showText", required: false }] }], showTextOnMobile: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTextOnMobile", required: false }] }] } });
+
 /**
  * Theme toggle switch with sun/moon icons
  *
@@ -8003,5 +8296,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, LogoComponent, 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