@eduboxpro/studio 0.1.35 → 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';
@@ -7677,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
  *
@@ -8239,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, 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 };
+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