@meshmakers/octo-ui 3.4.320 → 3.4.330

package/fesm2022/meshmakers-octo-ui-branding-settings.mjs

@@ -274,10 +274,10 @@ class SettingsPageComponent {
                 return m.logoFavicon;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: SettingsPageComponent, isStandalone: true, selector: "mm-branding-settings", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"settings-page\">\n  <form [formGroup]=\"settingsForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- General -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header>\n        <h3 class=\"card-title\">{{ messages().sectionGeneral }}</h3>\n      </kendo-card-header>\n      <kendo-card-body>\n        <div class=\"form-row\">\n          <kendo-formfield [title]=\"messages().appName\">\n            <kendo-label [text]=\"messages().appName\" [optional]=\"false\" />\n            <input kendoTextBox formControlName=\"appName\" [required]=\"true\" />\n            <kendo-formerror>\n              {{ messages().appName }} {{ messages().required }}\n            </kendo-formerror>\n          </kendo-formfield>\n          <kendo-formfield [title]=\"messages().appTitle\">\n            <kendo-label [text]=\"messages().appTitle\" [optional]=\"true\" />\n            <input kendoTextBox formControlName=\"appTitle\" />\n          </kendo-formfield>\n        </div>\n      </kendo-card-body>\n    </kendo-card>\n\n    <!-- Logos -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header>\n        <h3 class=\"card-title\">{{ messages().sectionLogos }}</h3>\n      </kendo-card-header>\n      <kendo-card-body>\n        <div class=\"logo-upload-row\">\n          @for (slot of logoSlotNames; track slot) {\n            <div class=\"file-upload-section\">\n              <label class=\"upload-label\" [attr.for]=\"'logo-' + slot\">\n                {{ logoLabel(slot) }}\n              </label>\n              <div\n                class=\"logo-dropzone\"\n                [class.logo-dropzone--active]=\"isDragOver(slot)\"\n                role=\"button\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"logoLabel(slot)\"\n                (click)=\"logoInput.click()\"\n                (keydown.enter)=\"logoInput.click()\"\n                (keydown.space)=\"$event.preventDefault(); logoInput.click()\"\n                (dragover)=\"onLogoDragOver(slot, $event)\"\n                (dragleave)=\"onLogoDragLeave(slot)\"\n                (drop)=\"onLogoDropped(slot, $event)\"\n              >\n                <span class=\"logo-dropzone__label\">\n                  {{ slot === 'favicon' ? messages().uploadFavicon : messages().uploadLogo }}\n                </span>\n                <input\n                  #logoInput\n                  type=\"file\"\n                  accept=\"image/*\"\n                  [id]=\"'logo-' + slot\"\n                  (change)=\"onLogoSelected(slot, $event)\"\n                  class=\"logo-dropzone__input\"\n                />\n              </div>\n              @let url = previewUrl(slot);\n              @if (url) {\n                <div class=\"logo-preview\">\n                  <img [src]=\"url\" [alt]=\"logoLabel(slot) + ' preview'\" />\n                  <button\n                    kendoButton\n                    type=\"button\"\n                    fillMode=\"flat\"\n                    [svgIcon]=\"xIcon\"\n                    (click)=\"clearLogo(slot)\"\n                    [attr.aria-label]=\"messages().logoRemove\"\n                  ></button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </kendo-card-body>\n    </kendo-card>\n\n    <!-- Light Theme -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header>\n        <h3 class=\"card-title\">{{ messages().sectionLightTheme }}</h3>\n      </kendo-card-header>\n      <kendo-card-body>\n        <div class=\"color-grid\">\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorPrimary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightPrimaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorSecondary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightSecondaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorTertiary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightTertiaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorNeutral }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightNeutralColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorBackground }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightBackgroundColor')\"\n            ></kendo-colorpicker>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientHeader }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightHeaderGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('lightHeaderGradientStart')?.value + ', ' + settingsForm.get('lightHeaderGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightHeaderGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientFooter }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightFooterGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('lightFooterGradientStart')?.value + ', ' + settingsForm.get('lightFooterGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightFooterGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n      </kendo-card-body>\n    </kendo-card>\n\n    <!-- Dark Theme -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header class=\"dark-theme-header\">\n        <h3 class=\"card-title\">{{ messages().sectionDarkTheme }}</h3>\n        <label class=\"dark-theme-toggle\">\n          <kendo-switch formControlName=\"darkThemeEnabled\"></kendo-switch>\n          <span>{{ messages().enableDarkTheme }}</span>\n        </label>\n      </kendo-card-header>\n      @if (darkThemeEnabled()) {\n      <kendo-card-body>\n        <div class=\"color-grid\">\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorPrimary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkPrimaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorSecondary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkSecondaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorTertiary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkTertiaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorNeutral }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkNeutralColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorBackground }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkBackgroundColor')\"\n            ></kendo-colorpicker>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientHeader }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkHeaderGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('darkHeaderGradientStart')?.value + ', ' + settingsForm.get('darkHeaderGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkHeaderGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientFooter }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkFooterGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('darkFooterGradientStart')?.value + ', ' + settingsForm.get('darkFooterGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkFooterGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n      </kendo-card-body>\n      }\n    </kendo-card>\n\n    <div class=\"form-actions-bar\">\n      <button\n        kendoButton\n        type=\"button\"\n        themeColor=\"base\"\n        [svgIcon]=\"undoIcon\"\n        [disabled]=\"saving()\"\n        (click)=\"onResetDefaults()\"\n      >\n        {{ messages().resetDefaults }}\n      </button>\n      <button\n        kendoButton\n        type=\"submit\"\n        themeColor=\"primary\"\n        [svgIcon]=\"saveIcon\"\n        [disabled]=\"!settingsForm.valid || saving()\"\n      >\n        {{ messages().save }}\n      </button>\n    </div>\n  </form>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.settings-page{width:100%;padding:16px;box-sizing:border-box}kendo-card.settings-card{margin-bottom:16px;width:100%!important}.card-title{margin:0;font-size:1.1rem;font-weight:500}.form-row{display:flex;gap:16px;flex-wrap:wrap}.form-row kendo-formfield{flex:1 1 240px}.form-actions-bar{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding:12px 16px;background:var(--kendo-color-surface, #fff);border:1px solid var(--color-surface-200, color-mix(in oklch, var(--kendo-color-app-surface), currentColor 18%));border-radius:12px;box-shadow:0 6px 18px -8px #0f172a2e;z-index:1}.logo-upload-row{display:flex;gap:16px;flex-wrap:wrap}.file-upload-section{flex:1 1 220px}.upload-label{display:block;margin-bottom:4px;font-size:12px;color:var(--kendo-color-subtle, rgba(0, 0, 0, .6))}.logo-dropzone{margin-top:4px;height:80px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--kendo-color-border, #d5d5d5);border-radius:4px;background:var(--kendo-color-surface-alt, transparent);cursor:pointer;transition:border-color .12s ease,background .12s ease}.logo-dropzone:hover,.logo-dropzone:focus-visible{border-color:var(--kendo-color-primary, #5ac4be);outline:none}.logo-dropzone--active{border-color:var(--kendo-color-primary, #5ac4be);background:color-mix(in srgb,var(--kendo-color-primary, #5ac4be) 8%,transparent)}.logo-dropzone__label{font-size:.9rem;color:var(--kendo-color-subtle, rgba(0, 0, 0, .55));pointer-events:none}.logo-dropzone__input{display:none}.logo-preview{display:flex;align-items:center;gap:10px;margin-top:8px;position:relative}.logo-preview img{max-width:200px;max-height:80px;object-fit:contain;border:1px solid var(--kendo-color-border, #ddd);border-radius:4px;padding:4px}.logo-preview button{position:absolute;top:-8px;right:-8px}.color-grid{display:flex;gap:32px;flex-wrap:wrap}.color-field{display:flex;flex-direction:column;gap:4px}.color-label{font-size:12px;color:var(--kendo-color-subtle, rgba(0, 0, 0, .6))}.subsection-title{margin:16px 0 8px;font-size:.95rem;font-weight:500;color:var(--kendo-color-subtle, #666)}.gradient-section{border-top:1px solid var(--kendo-color-border, #e0e0e0);margin-top:16px;padding-top:4px}.gradient-row{display:flex;align-items:stretch;gap:16px}.gradient-row .color-field{flex:0 0 auto}.gradient-row .color-field.gradient-preview-col{flex:1 1 auto;min-width:0}.gradient-preview-col .color-label{visibility:hidden}.gradient-preview{flex:1;width:100%;border-radius:4px;border:1px solid var(--kendo-color-border, #e0e0e0)}.dark-theme-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dark-theme-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i1.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: i1.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i1.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i1.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i3.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i4.CardBodyComponent, selector: "kendo-card-body" }, { kind: "component", type: i4.CardHeaderComponent, selector: "kendo-card-header" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SettingsPageComponent, isStandalone: true, selector: "mm-branding-settings", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"settings-page\">\n  <form [formGroup]=\"settingsForm\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- General -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header>\n        <h3 class=\"card-title\">{{ messages().sectionGeneral }}</h3>\n      </kendo-card-header>\n      <kendo-card-body>\n        <div class=\"form-row\">\n          <kendo-formfield [title]=\"messages().appName\">\n            <kendo-label [text]=\"messages().appName\" [optional]=\"false\" />\n            <input kendoTextBox formControlName=\"appName\" [required]=\"true\" />\n            <kendo-formerror>\n              {{ messages().appName }} {{ messages().required }}\n            </kendo-formerror>\n          </kendo-formfield>\n          <kendo-formfield [title]=\"messages().appTitle\">\n            <kendo-label [text]=\"messages().appTitle\" [optional]=\"true\" />\n            <input kendoTextBox formControlName=\"appTitle\" />\n          </kendo-formfield>\n        </div>\n      </kendo-card-body>\n    </kendo-card>\n\n    <!-- Logos -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header>\n        <h3 class=\"card-title\">{{ messages().sectionLogos }}</h3>\n      </kendo-card-header>\n      <kendo-card-body>\n        <div class=\"logo-upload-row\">\n          @for (slot of logoSlotNames; track slot) {\n            <div class=\"file-upload-section\">\n              <label class=\"upload-label\" [attr.for]=\"'logo-' + slot\">\n                {{ logoLabel(slot) }}\n              </label>\n              <div\n                class=\"logo-dropzone\"\n                [class.logo-dropzone--active]=\"isDragOver(slot)\"\n                role=\"button\"\n                tabindex=\"0\"\n                [attr.aria-label]=\"logoLabel(slot)\"\n                (click)=\"logoInput.click()\"\n                (keydown.enter)=\"logoInput.click()\"\n                (keydown.space)=\"$event.preventDefault(); logoInput.click()\"\n                (dragover)=\"onLogoDragOver(slot, $event)\"\n                (dragleave)=\"onLogoDragLeave(slot)\"\n                (drop)=\"onLogoDropped(slot, $event)\"\n              >\n                <span class=\"logo-dropzone__label\">\n                  {{ slot === 'favicon' ? messages().uploadFavicon : messages().uploadLogo }}\n                </span>\n                <input\n                  #logoInput\n                  type=\"file\"\n                  accept=\"image/*\"\n                  [id]=\"'logo-' + slot\"\n                  (change)=\"onLogoSelected(slot, $event)\"\n                  class=\"logo-dropzone__input\"\n                />\n              </div>\n              @let url = previewUrl(slot);\n              @if (url) {\n                <div class=\"logo-preview\">\n                  <img [src]=\"url\" [alt]=\"logoLabel(slot) + ' preview'\" />\n                  <button\n                    kendoButton\n                    type=\"button\"\n                    fillMode=\"flat\"\n                    [svgIcon]=\"xIcon\"\n                    (click)=\"clearLogo(slot)\"\n                    [attr.aria-label]=\"messages().logoRemove\"\n                  ></button>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      </kendo-card-body>\n    </kendo-card>\n\n    <!-- Light Theme -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header>\n        <h3 class=\"card-title\">{{ messages().sectionLightTheme }}</h3>\n      </kendo-card-header>\n      <kendo-card-body>\n        <div class=\"color-grid\">\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorPrimary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightPrimaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorSecondary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightSecondaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorTertiary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightTertiaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorNeutral }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightNeutralColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorBackground }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('lightBackgroundColor')\"\n            ></kendo-colorpicker>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientHeader }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightHeaderGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('lightHeaderGradientStart')?.value + ', ' + settingsForm.get('lightHeaderGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightHeaderGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientFooter }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightFooterGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('lightFooterGradientStart')?.value + ', ' + settingsForm.get('lightFooterGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('lightFooterGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n      </kendo-card-body>\n    </kendo-card>\n\n    <!-- Dark Theme -->\n    <kendo-card class=\"settings-card\">\n      <kendo-card-header class=\"dark-theme-header\">\n        <h3 class=\"card-title\">{{ messages().sectionDarkTheme }}</h3>\n        <label class=\"dark-theme-toggle\">\n          <kendo-switch formControlName=\"darkThemeEnabled\"></kendo-switch>\n          <span>{{ messages().enableDarkTheme }}</span>\n        </label>\n      </kendo-card-header>\n      @if (darkThemeEnabled()) {\n      <kendo-card-body>\n        <div class=\"color-grid\">\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorPrimary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkPrimaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorSecondary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkSecondaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorTertiary }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkTertiaryColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorNeutral }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkNeutralColor')\"\n            ></kendo-colorpicker>\n          </div>\n          <div class=\"color-field\">\n            <label class=\"color-label\">{{ messages().colorBackground }}</label>\n            <kendo-colorpicker\n              [formControl]=\"colorCtrl('darkBackgroundColor')\"\n            ></kendo-colorpicker>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientHeader }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkHeaderGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('darkHeaderGradientStart')?.value + ', ' + settingsForm.get('darkHeaderGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkHeaderGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"gradient-section\">\n          <h4 class=\"subsection-title\">{{ messages().gradientFooter }}</h4>\n          <div class=\"gradient-row\">\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientStart }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkFooterGradientStart')\"\n              ></kendo-colorpicker>\n            </div>\n            <div class=\"color-field gradient-preview-col\">\n              <span class=\"color-label\" aria-hidden=\"true\">&nbsp;</span>\n              <div\n                class=\"gradient-preview\"\n                [style.background]=\"'linear-gradient(to right, ' + settingsForm.get('darkFooterGradientStart')?.value + ', ' + settingsForm.get('darkFooterGradientEnd')?.value + ')'\"\n              ></div>\n            </div>\n            <div class=\"color-field\">\n              <label class=\"color-label\">{{ messages().gradientEnd }}</label>\n              <kendo-colorpicker\n                [formControl]=\"colorCtrl('darkFooterGradientEnd')\"\n              ></kendo-colorpicker>\n            </div>\n          </div>\n        </div>\n      </kendo-card-body>\n      }\n    </kendo-card>\n\n    <div class=\"form-actions-bar\">\n      <button\n        kendoButton\n        type=\"button\"\n        themeColor=\"base\"\n        [svgIcon]=\"undoIcon\"\n        [disabled]=\"saving()\"\n        (click)=\"onResetDefaults()\"\n      >\n        {{ messages().resetDefaults }}\n      </button>\n      <button\n        kendoButton\n        type=\"submit\"\n        themeColor=\"primary\"\n        [svgIcon]=\"saveIcon\"\n        [disabled]=\"!settingsForm.valid || saving()\"\n      >\n        {{ messages().save }}\n      </button>\n    </div>\n  </form>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.settings-page{width:100%;padding:16px;box-sizing:border-box}kendo-card.settings-card{margin-bottom:16px;width:100%!important}.card-title{margin:0;font-size:1.1rem;font-weight:500}.form-row{display:flex;gap:16px;flex-wrap:wrap}.form-row kendo-formfield{flex:1 1 240px}.form-actions-bar{position:sticky;bottom:12px;display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding:12px 16px;background:var(--kendo-color-surface, #fff);border:1px solid var(--color-surface-200, color-mix(in oklch, var(--kendo-color-app-surface), currentColor 18%));border-radius:12px;box-shadow:0 6px 18px -8px #0f172a2e;z-index:1}.logo-upload-row{display:flex;gap:16px;flex-wrap:wrap}.file-upload-section{flex:1 1 220px}.upload-label{display:block;margin-bottom:4px;font-size:12px;color:var(--kendo-color-subtle, rgba(0, 0, 0, .6))}.logo-dropzone{margin-top:4px;height:80px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--kendo-color-border, #d5d5d5);border-radius:4px;background:var(--kendo-color-surface-alt, transparent);cursor:pointer;transition:border-color .12s ease,background .12s ease}.logo-dropzone:hover,.logo-dropzone:focus-visible{border-color:var(--kendo-color-primary, #5ac4be);outline:none}.logo-dropzone--active{border-color:var(--kendo-color-primary, #5ac4be);background:color-mix(in srgb,var(--kendo-color-primary, #5ac4be) 8%,transparent)}.logo-dropzone__label{font-size:.9rem;color:var(--kendo-color-subtle, rgba(0, 0, 0, .55));pointer-events:none}.logo-dropzone__input{display:none}.logo-preview{display:flex;align-items:center;gap:10px;margin-top:8px;position:relative}.logo-preview img{max-width:200px;max-height:80px;object-fit:contain;border:1px solid var(--kendo-color-border, #ddd);border-radius:4px;padding:4px}.logo-preview button{position:absolute;top:-8px;right:-8px}.color-grid{display:flex;gap:32px;flex-wrap:wrap}.color-field{display:flex;flex-direction:column;gap:4px}.color-label{font-size:12px;color:var(--kendo-color-subtle, rgba(0, 0, 0, .6))}.subsection-title{margin:16px 0 8px;font-size:.95rem;font-weight:500;color:var(--kendo-color-subtle, #666)}.gradient-section{border-top:1px solid var(--kendo-color-border, #e0e0e0);margin-top:16px;padding-top:4px}.gradient-row{display:flex;align-items:stretch;gap:16px}.gradient-row .color-field{flex:0 0 auto}.gradient-row .color-field.gradient-preview-col{flex:1 1 auto;min-width:0}.gradient-preview-col .color-label{visibility:hidden}.gradient-preview{flex:1;width:100%;border-radius:4px;border:1px solid var(--kendo-color-border, #e0e0e0)}.dark-theme-header{display:flex;align-items:center;justify-content:space-between;gap:16px}.dark-theme-toggle{display:inline-flex;align-items:center;gap:8px;font-size:.95rem;cursor:pointer;-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i1.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i1.SwitchComponent, selector: "kendo-switch", inputs: ["focusableId", "onLabel", "offLabel", "checked", "disabled", "readonly", "tabindex", "size", "thumbRounded", "trackRounded", "tabIndex"], outputs: ["focus", "blur", "valueChange"], exportAs: ["kendoSwitch"] }, { kind: "component", type: i1.FormFieldComponent, selector: "kendo-formfield", inputs: ["showHints", "orientation", "showErrors", "colSpan"] }, { kind: "component", type: i1.ErrorComponent, selector: "kendo-formerror", inputs: ["align"] }, { kind: "component", type: i1.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "adaptiveMode", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "adaptiveTitle", "adaptiveSubtitle", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "clearButtonClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { kind: "ngmodule", type: LabelModule }, { kind: "component", type: i2.LabelComponent, selector: "kendo-label", inputs: ["text", "for", "optional", "labelCssStyle", "labelCssClass"], exportAs: ["kendoLabel"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i3.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: LayoutModule }, { kind: "component", type: i4.CardComponent, selector: "kendo-card", inputs: ["orientation", "width"] }, { kind: "component", type: i4.CardBodyComponent, selector: "kendo-card-body" }, { kind: "component", type: i4.CardHeaderComponent, selector: "kendo-card-header" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: SettingsPageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SettingsPageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mm-branding-settings', standalone: true, imports: [
                         InputsModule,

package/fesm2022/meshmakers-octo-ui-branding.mjs

@@ -105,10 +105,10 @@ class CreateBrandingDtoGQL extends i1.Mutation {
     constructor(apollo) {
         super(apollo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CreateBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CreateBrandingDtoGQL, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CreateBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CreateBrandingDtoGQL, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CreateBrandingDtoGQL, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CreateBrandingDtoGQL, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -171,10 +171,10 @@ class GetBrandingDtoGQL extends i1.Query {
     constructor(apollo) {
         super(apollo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetBrandingDtoGQL, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GetBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GetBrandingDtoGQL, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: GetBrandingDtoGQL, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GetBrandingDtoGQL, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -233,10 +233,10 @@ class UpdateBrandingDtoGQL extends i1.Mutation {
     constructor(apollo) {
         super(apollo);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: UpdateBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: UpdateBrandingDtoGQL, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UpdateBrandingDtoGQL, deps: [{ token: i1.Apollo }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UpdateBrandingDtoGQL, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: UpdateBrandingDtoGQL, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: UpdateBrandingDtoGQL, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -470,10 +470,10 @@ class BrandingDataSource {
         const buffer = await file.arrayBuffer();
         return Array.from(new Uint8Array(buffer));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BrandingDataSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BrandingDataSource, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BrandingDataSource, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BrandingDataSource, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BrandingDataSource, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BrandingDataSource, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -548,10 +548,10 @@ class AppTitleService extends TitleStrategy {
         }
         return breadcrumb;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AppTitleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AppTitleService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppTitleService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppTitleService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: AppTitleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AppTitleService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -655,10 +655,10 @@ class ThemeService {
         return (this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)')
             .matches ?? false);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -692,10 +692,10 @@ class ThemeSwitcherComponent {
             return;
         this.themeService.setDark(!this.isDark());
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: ThemeSwitcherComponent, isStandalone: true, selector: "mm-theme-switcher", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"isDark()\"\n  [disabled]=\"!available()\"\n  (click)=\"onToggle()\"\n>\n  <kendo-svg-icon [icon]=\"isDark() ? lightIcon : darkIcon\" />\n</button>\n", styles: [":host{display:inline-flex}button{appearance:none;background:transparent;border:0;padding:var(--kendo-spacing-2);cursor:pointer;color:inherit}button[disabled]{cursor:not-allowed;opacity:.5}button:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeSwitcherComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ThemeSwitcherComponent, isStandalone: true, selector: "mm-theme-switcher", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"isDark()\"\n  [disabled]=\"!available()\"\n  (click)=\"onToggle()\"\n>\n  <kendo-svg-icon [icon]=\"isDark() ? lightIcon : darkIcon\" />\n</button>\n", styles: [":host{display:inline-flex}button{appearance:none;background:transparent;border:0;padding:var(--kendo-spacing-2);cursor:pointer;color:inherit}button[disabled]{cursor:not-allowed;opacity:.5}button:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"], dependencies: [{ kind: "ngmodule", type: SVGIconModule }, { kind: "component", type: i1$1.SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ThemeSwitcherComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mm-theme-switcher', standalone: true, imports: [SVGIconModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"button\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-pressed]=\"isDark()\"\n  [disabled]=\"!available()\"\n  (click)=\"onToggle()\"\n>\n  <kendo-svg-icon [icon]=\"isDark() ? lightIcon : darkIcon\" />\n</button>\n", styles: [":host{display:inline-flex}button{appearance:none;background:transparent;border:0;padding:var(--kendo-spacing-2);cursor:pointer;color:inherit}button[disabled]{cursor:not-allowed;opacity:.5}button:focus-visible{outline:2px solid currentColor;outline-offset:2px}\n"] }]
         }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
@@ -988,10 +988,10 @@ class BrandingApplicationService {
         const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
         return brightness > 128 ? '#000000' : '#ffffff';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BrandingApplicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BrandingApplicationService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BrandingApplicationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BrandingApplicationService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: BrandingApplicationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BrandingApplicationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });

package/fesm2022/meshmakers-octo-ui-tree-navigation-settings.mjs

@@ -60,9 +60,12 @@ const DEFAULT_TREE_NAVIGATION_SETTINGS_MESSAGES = {
     columnRootMode: 'Root',
     columnRootType: 'Root CK type',
     columnPrimaryRole: 'Primary role',
+    columnPrimaryDirection: 'Direction',
     columnSecondaryRoles: 'Secondary roles',
     rootModeSpatial: 'Spatial',
     rootModeType: 'Type',
+    directionInbound: 'Inbound',
+    directionOutbound: 'Outbound',
     secondaryRolesHint: 'comma-separated role ids',
     addPerspective: 'Add perspective',
     perspectivesEmpty: 'No extra perspectives — only the built-in Spatial view.',
@@ -102,6 +105,11 @@ class TreeNavigationSettingsComponent {
         { text: this.messages().rootModeType, value: 'Type' },
     ], /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "rootModeOptions" }] : /* istanbul ignore next */ []));
+    directionOptions = computed(() => [
+        { text: this.messages().directionInbound, value: 'Inbound' },
+        { text: this.messages().directionOutbound, value: 'Outbound' },
+    ], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "directionOptions" }] : /* istanbul ignore next */ []));
     // Shared suggestion pools — only one combobox dropdown is open at a time, so a
     // single signal per kind is enough (loaded on open / filter).
     ckTypeSuggestions = signal([WILDCARD], /* @ts-ignore */
@@ -311,6 +319,7 @@ class TreeNavigationSettingsComponent {
             rootMode: [p?.rootMode ?? 'Type'],
             rootCkTypeId: [p?.rootCkTypeId ?? ''],
             primaryRoleId: [p?.primaryRoleId ?? ''],
+            primaryDirection: [p?.primaryDirection ?? 'Inbound'],
             secondaryRoleIds: [(p?.secondaryRoleIds ?? []).join(', ')],
             sortIndex: [p?.sortIndex ?? null],
             icon: [p?.icon ?? ''],
@@ -329,6 +338,7 @@ class TreeNavigationSettingsComponent {
             rootMode: value.rootMode === 'Spatial' ? 'Spatial' : 'Type',
             rootCkTypeId: value.rootCkTypeId?.trim() || undefined,
             primaryRoleId: value.primaryRoleId?.trim() || undefined,
+            primaryDirection: value.primaryDirection === 'Outbound' ? 'Outbound' : undefined,
             secondaryRoleIds: secondary.length > 0 ? secondary : undefined,
             sortIndex: value.sortIndex ?? undefined,
             icon: value.icon?.trim() || undefined,
@@ -367,10 +377,10 @@ class TreeNavigationSettingsComponent {
             return 'auto';
         return grouped ? 'group' : 'flatten';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TreeNavigationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: TreeNavigationSettingsComponent, isStandalone: true, selector: "mm-tree-navigation-settings", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tree-nav-settings\">\n  <header class=\"header\">\n    <h2 class=\"title\">{{ messages().title }}</h2>\n    <p class=\"description\">{{ messages().description }}</p>\n  </header>\n\n  @if (loading()) {\n    <div class=\"state\">\u2026</div>\n  } @else if (!typePresent()) {\n    <div class=\"hint not-installed\">{{ messages().notInstalled }}</div>\n  } @else {\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addRule()\">\n        {{ messages().addRule }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"exportIcon\"\n        fillMode=\"flat\"\n        (click)=\"export()\"\n      >\n        {{ messages().export }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"importIcon\"\n        fillMode=\"flat\"\n        (click)=\"fileInput.click()\"\n      >\n        {{ messages().import }}\n      </button>\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\".zip\"\n        hidden\n        (change)=\"onFileSelected($event)\"\n      />\n      <span class=\"toolbar-spacer\"></span>\n      <button\n        kendoButton\n        [svgIcon]=\"reloadIcon\"\n        fillMode=\"flat\"\n        [disabled]=\"saving()\"\n        (click)=\"reload()\"\n      >\n        {{ messages().reload }}\n      </button>\n      <button\n        kendoButton\n        themeColor=\"primary\"\n        [svgIcon]=\"saveIcon\"\n        [disabled]=\"saving()\"\n        (click)=\"onSave()\"\n      >\n        {{ messages().save }}\n      </button>\n    </div>\n\n    @if (rules.length === 0) {\n      <div class=\"empty\">{{ messages().empty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnSourceType }}</th>\n              <th>{{ messages().columnRole }}</th>\n              <th>{{ messages().columnDisplayName }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th class=\"narrow\">{{ messages().columnVisible }}</th>\n              <th class=\"narrow\">{{ messages().columnGrouped }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of rules.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().sourceTypeHint\"\n                    formControlName=\"sourceCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().roleHint\"\n                    formControlName=\"roleId\"\n                    (open)=\"loadRoleSuggestions(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"visibleOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"visible\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"groupedOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"grouped\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removeRule($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    <header class=\"header perspectives-header\">\n      <h2 class=\"title\">{{ messages().perspectivesTitle }}</h2>\n      <p class=\"description\">{{ messages().perspectivesDescription }}</p>\n    </header>\n\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addPerspective()\">\n        {{ messages().addPerspective }}\n      </button>\n    </div>\n\n    @if (perspectiveRows.length === 0) {\n      <div class=\"empty\">{{ messages().perspectivesEmpty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnKey }}</th>\n              <th>{{ messages().columnPerspectiveName }}</th>\n              <th class=\"narrow\">{{ messages().columnRootMode }}</th>\n              <th>{{ messages().columnRootType }}</th>\n              <th>{{ messages().columnPrimaryRole }}</th>\n              <th>{{ messages().columnSecondaryRoles }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of perspectiveRows.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td><input kendoTextBox formControlName=\"key\" /></td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"rootModeOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootMode\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"primaryRoleId\"\n                    (open)=\"loadRoleSuggestionsForType(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <input\n                    kendoTextBox\n                    formControlName=\"secondaryRoleIds\"\n                    [placeholder]=\"messages().secondaryRolesHint\"\n                  />\n                </td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removePerspective($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;padding:16px 20px}.header{margin-bottom:16px}.header .title{margin:0 0 4px;font-size:1.1rem;font-weight:600}.header .description{margin:0;max-width:70ch;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.toolbar .toolbar-spacer{flex:1}.hint,.empty{padding:12px 14px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);color:var(--kendo-color-subtle, #6c757d);font-size:.9rem}.table-wrap{overflow-x:auto}.rules{width:100%;border-collapse:collapse}.rules th,.rules td{padding:6px 8px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.rules th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--kendo-color-subtle, #6c757d);font-weight:600}.rules td input,.rules td kendo-numerictextbox,.rules td kendo-dropdownlist{width:100%}.rules .narrow{width:120px}.rules .actions{width:48px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TreeNavigationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TreeNavigationSettingsComponent, isStandalone: true, selector: "mm-tree-navigation-settings", inputs: { messages: { classPropertyName: "messages", publicName: "messages", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"tree-nav-settings\">\n  <header class=\"header\">\n    <h2 class=\"title\">{{ messages().title }}</h2>\n    <p class=\"description\">{{ messages().description }}</p>\n  </header>\n\n  @if (loading()) {\n    <div class=\"state\">\u2026</div>\n  } @else if (!typePresent()) {\n    <div class=\"hint not-installed\">{{ messages().notInstalled }}</div>\n  } @else {\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addRule()\">\n        {{ messages().addRule }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"exportIcon\"\n        fillMode=\"flat\"\n        (click)=\"export()\"\n      >\n        {{ messages().export }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"importIcon\"\n        fillMode=\"flat\"\n        (click)=\"fileInput.click()\"\n      >\n        {{ messages().import }}\n      </button>\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\".zip\"\n        hidden\n        (change)=\"onFileSelected($event)\"\n      />\n      <span class=\"toolbar-spacer\"></span>\n      <button\n        kendoButton\n        [svgIcon]=\"reloadIcon\"\n        fillMode=\"flat\"\n        [disabled]=\"saving()\"\n        (click)=\"reload()\"\n      >\n        {{ messages().reload }}\n      </button>\n      <button\n        kendoButton\n        themeColor=\"primary\"\n        [svgIcon]=\"saveIcon\"\n        [disabled]=\"saving()\"\n        (click)=\"onSave()\"\n      >\n        {{ messages().save }}\n      </button>\n    </div>\n\n    @if (rules.length === 0) {\n      <div class=\"empty\">{{ messages().empty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnSourceType }}</th>\n              <th>{{ messages().columnRole }}</th>\n              <th>{{ messages().columnDisplayName }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th class=\"narrow\">{{ messages().columnVisible }}</th>\n              <th class=\"narrow\">{{ messages().columnGrouped }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of rules.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().sourceTypeHint\"\n                    formControlName=\"sourceCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().roleHint\"\n                    formControlName=\"roleId\"\n                    (open)=\"loadRoleSuggestions(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"visibleOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"visible\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"groupedOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"grouped\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removeRule($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    <header class=\"header perspectives-header\">\n      <h2 class=\"title\">{{ messages().perspectivesTitle }}</h2>\n      <p class=\"description\">{{ messages().perspectivesDescription }}</p>\n    </header>\n\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addPerspective()\">\n        {{ messages().addPerspective }}\n      </button>\n    </div>\n\n    @if (perspectiveRows.length === 0) {\n      <div class=\"empty\">{{ messages().perspectivesEmpty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnKey }}</th>\n              <th>{{ messages().columnPerspectiveName }}</th>\n              <th class=\"narrow\">{{ messages().columnRootMode }}</th>\n              <th>{{ messages().columnRootType }}</th>\n              <th>{{ messages().columnPrimaryRole }}</th>\n              <th class=\"narrow\">{{ messages().columnPrimaryDirection }}</th>\n              <th>{{ messages().columnSecondaryRoles }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of perspectiveRows.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td><input kendoTextBox formControlName=\"key\" /></td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"rootModeOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootMode\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"primaryRoleId\"\n                    (open)=\"loadRoleSuggestionsForType(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"directionOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"primaryDirection\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td>\n                  <input\n                    kendoTextBox\n                    formControlName=\"secondaryRoleIds\"\n                    [placeholder]=\"messages().secondaryRolesHint\"\n                  />\n                </td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removePerspective($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;padding:16px 20px}.header{margin-bottom:16px}.header .title{margin:0 0 4px;font-size:1.1rem;font-weight:600}.header .description{margin:0;max-width:70ch;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.toolbar .toolbar-spacer{flex:1}.hint,.empty{padding:12px 14px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);color:var(--kendo-color-subtle, #6c757d);font-size:.9rem}.table-wrap{overflow-x:auto}.rules{width:100%;border-collapse:collapse}.rules th,.rules td{padding:6px 8px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.rules th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--kendo-color-subtle, #6c757d);font-weight:600}.rules td input,.rules td kendo-numerictextbox,.rules td kendo-dropdownlist{width:100%}.rules .narrow{width:120px}.rules .actions{width:48px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: ButtonsModule }, { kind: "component", type: i2.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconPosition", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "ngmodule", type: InputsModule }, { kind: "directive", type: i3.TextBoxDirective, selector: "input[kendoTextBox]", inputs: ["value"] }, { kind: "component", type: i3.NumericTextBoxComponent, selector: "kendo-numerictextbox", inputs: ["focusableId", "disabled", "readonly", "title", "autoCorrect", "format", "max", "min", "decimals", "placeholder", "step", "spinners", "rangeValidation", "tabindex", "tabIndex", "changeValueOnScroll", "selectOnFocus", "value", "maxlength", "size", "rounded", "fillMode", "inputAttributes"], outputs: ["valueChange", "focus", "blur", "inputFocus", "inputBlur"], exportAs: ["kendoNumericTextBox"] }, { kind: "ngmodule", type: LabelModule }, { kind: "ngmodule", type: DropDownsModule }, { kind: "component", type: i4.ComboBoxComponent, selector: "kendo-combobox", inputs: ["icon", "svgIcon", "inputAttributes", "showStickyHeader", "focusableId", "allowCustom", "data", "value", "textField", "valueField", "valuePrimitive", "valueNormalizer", "placeholder", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "loading", "suggest", "clearButton", "disabled", "itemDisabled", "readonly", "tabindex", "tabIndex", "filterable", "virtual", "size", "rounded", "fillMode"], outputs: ["valueChange", "selectionChange", "filterChange", "open", "opened", "close", "closed", "focus", "blur", "inputFocus", "inputBlur", "escape"], exportAs: ["kendoComboBox"] }, { kind: "component", type: i4.DropDownListComponent, selector: "kendo-dropdownlist", inputs: ["customIconClass", "showStickyHeader", "icon", "svgIcon", "loading", "data", "value", "textField", "valueField", "adaptiveMode", "adaptiveTitle", "adaptiveSubtitle", "popupSettings", "listHeight", "defaultItem", "disabled", "itemDisabled", "readonly", "filterable", "virtual", "ignoreCase", "delay", "valuePrimitive", "tabindex", "tabIndex", "size", "rounded", "fillMode", "leftRightArrowsNavigation", "id"], outputs: ["valueChange", "filterChange", "selectionChange", "open", "opened", "close", "closed", "focus", "blur"], exportAs: ["kendoDropDownList"] }], changeDetection: i0.ChangeDetectionStrategy.Eager });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: TreeNavigationSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TreeNavigationSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mm-tree-navigation-settings', standalone: true, imports: [
                         CommonModule,
@@ -379,7 +389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImpor
                         InputsModule,
                         LabelModule,
                         DropDownsModule,
-                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"tree-nav-settings\">\n  <header class=\"header\">\n    <h2 class=\"title\">{{ messages().title }}</h2>\n    <p class=\"description\">{{ messages().description }}</p>\n  </header>\n\n  @if (loading()) {\n    <div class=\"state\">\u2026</div>\n  } @else if (!typePresent()) {\n    <div class=\"hint not-installed\">{{ messages().notInstalled }}</div>\n  } @else {\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addRule()\">\n        {{ messages().addRule }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"exportIcon\"\n        fillMode=\"flat\"\n        (click)=\"export()\"\n      >\n        {{ messages().export }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"importIcon\"\n        fillMode=\"flat\"\n        (click)=\"fileInput.click()\"\n      >\n        {{ messages().import }}\n      </button>\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\".zip\"\n        hidden\n        (change)=\"onFileSelected($event)\"\n      />\n      <span class=\"toolbar-spacer\"></span>\n      <button\n        kendoButton\n        [svgIcon]=\"reloadIcon\"\n        fillMode=\"flat\"\n        [disabled]=\"saving()\"\n        (click)=\"reload()\"\n      >\n        {{ messages().reload }}\n      </button>\n      <button\n        kendoButton\n        themeColor=\"primary\"\n        [svgIcon]=\"saveIcon\"\n        [disabled]=\"saving()\"\n        (click)=\"onSave()\"\n      >\n        {{ messages().save }}\n      </button>\n    </div>\n\n    @if (rules.length === 0) {\n      <div class=\"empty\">{{ messages().empty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnSourceType }}</th>\n              <th>{{ messages().columnRole }}</th>\n              <th>{{ messages().columnDisplayName }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th class=\"narrow\">{{ messages().columnVisible }}</th>\n              <th class=\"narrow\">{{ messages().columnGrouped }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of rules.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().sourceTypeHint\"\n                    formControlName=\"sourceCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().roleHint\"\n                    formControlName=\"roleId\"\n                    (open)=\"loadRoleSuggestions(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"visibleOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"visible\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"groupedOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"grouped\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removeRule($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    <header class=\"header perspectives-header\">\n      <h2 class=\"title\">{{ messages().perspectivesTitle }}</h2>\n      <p class=\"description\">{{ messages().perspectivesDescription }}</p>\n    </header>\n\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addPerspective()\">\n        {{ messages().addPerspective }}\n      </button>\n    </div>\n\n    @if (perspectiveRows.length === 0) {\n      <div class=\"empty\">{{ messages().perspectivesEmpty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnKey }}</th>\n              <th>{{ messages().columnPerspectiveName }}</th>\n              <th class=\"narrow\">{{ messages().columnRootMode }}</th>\n              <th>{{ messages().columnRootType }}</th>\n              <th>{{ messages().columnPrimaryRole }}</th>\n              <th>{{ messages().columnSecondaryRoles }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of perspectiveRows.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td><input kendoTextBox formControlName=\"key\" /></td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"rootModeOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootMode\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"primaryRoleId\"\n                    (open)=\"loadRoleSuggestionsForType(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <input\n                    kendoTextBox\n                    formControlName=\"secondaryRoleIds\"\n                    [placeholder]=\"messages().secondaryRolesHint\"\n                  />\n                </td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removePerspective($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;padding:16px 20px}.header{margin-bottom:16px}.header .title{margin:0 0 4px;font-size:1.1rem;font-weight:600}.header .description{margin:0;max-width:70ch;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.toolbar .toolbar-spacer{flex:1}.hint,.empty{padding:12px 14px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);color:var(--kendo-color-subtle, #6c757d);font-size:.9rem}.table-wrap{overflow-x:auto}.rules{width:100%;border-collapse:collapse}.rules th,.rules td{padding:6px 8px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.rules th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--kendo-color-subtle, #6c757d);font-weight:600}.rules td input,.rules td kendo-numerictextbox,.rules td kendo-dropdownlist{width:100%}.rules .narrow{width:120px}.rules .actions{width:48px;text-align:center}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div class=\"tree-nav-settings\">\n  <header class=\"header\">\n    <h2 class=\"title\">{{ messages().title }}</h2>\n    <p class=\"description\">{{ messages().description }}</p>\n  </header>\n\n  @if (loading()) {\n    <div class=\"state\">\u2026</div>\n  } @else if (!typePresent()) {\n    <div class=\"hint not-installed\">{{ messages().notInstalled }}</div>\n  } @else {\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addRule()\">\n        {{ messages().addRule }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"exportIcon\"\n        fillMode=\"flat\"\n        (click)=\"export()\"\n      >\n        {{ messages().export }}\n      </button>\n      <button\n        kendoButton\n        [svgIcon]=\"importIcon\"\n        fillMode=\"flat\"\n        (click)=\"fileInput.click()\"\n      >\n        {{ messages().import }}\n      </button>\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\".zip\"\n        hidden\n        (change)=\"onFileSelected($event)\"\n      />\n      <span class=\"toolbar-spacer\"></span>\n      <button\n        kendoButton\n        [svgIcon]=\"reloadIcon\"\n        fillMode=\"flat\"\n        [disabled]=\"saving()\"\n        (click)=\"reload()\"\n      >\n        {{ messages().reload }}\n      </button>\n      <button\n        kendoButton\n        themeColor=\"primary\"\n        [svgIcon]=\"saveIcon\"\n        [disabled]=\"saving()\"\n        (click)=\"onSave()\"\n      >\n        {{ messages().save }}\n      </button>\n    </div>\n\n    @if (rules.length === 0) {\n      <div class=\"empty\">{{ messages().empty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnSourceType }}</th>\n              <th>{{ messages().columnRole }}</th>\n              <th>{{ messages().columnDisplayName }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th class=\"narrow\">{{ messages().columnVisible }}</th>\n              <th class=\"narrow\">{{ messages().columnGrouped }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of rules.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().sourceTypeHint\"\n                    formControlName=\"sourceCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    [placeholder]=\"messages().roleHint\"\n                    formControlName=\"roleId\"\n                    (open)=\"loadRoleSuggestions(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"visibleOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"visible\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"groupedOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"grouped\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removeRule($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    <header class=\"header perspectives-header\">\n      <h2 class=\"title\">{{ messages().perspectivesTitle }}</h2>\n      <p class=\"description\">{{ messages().perspectivesDescription }}</p>\n    </header>\n\n    <div class=\"toolbar mm-toolbar-actions\">\n      <button kendoButton [svgIcon]=\"plusIcon\" (click)=\"addPerspective()\">\n        {{ messages().addPerspective }}\n      </button>\n    </div>\n\n    @if (perspectiveRows.length === 0) {\n      <div class=\"empty\">{{ messages().perspectivesEmpty }}</div>\n    } @else {\n      <div class=\"table-wrap\">\n        <table class=\"rules\">\n          <thead>\n            <tr>\n              <th>{{ messages().columnKey }}</th>\n              <th>{{ messages().columnPerspectiveName }}</th>\n              <th class=\"narrow\">{{ messages().columnRootMode }}</th>\n              <th>{{ messages().columnRootType }}</th>\n              <th>{{ messages().columnPrimaryRole }}</th>\n              <th class=\"narrow\">{{ messages().columnPrimaryDirection }}</th>\n              <th>{{ messages().columnSecondaryRoles }}</th>\n              <th class=\"narrow\">{{ messages().columnSortIndex }}</th>\n              <th>{{ messages().columnIcon }}</th>\n              <th class=\"actions\">{{ messages().columnActions }}</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (row of perspectiveRows.controls; track $index) {\n              <tr [formGroup]=\"row\">\n                <td><input kendoTextBox formControlName=\"key\" /></td>\n                <td><input kendoTextBox formControlName=\"displayName\" /></td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"rootModeOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootMode\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"ckTypeSuggestions()\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"rootCkTypeId\"\n                    (open)=\"searchCkTypes('')\"\n                    (filterChange)=\"searchCkTypes($event)\"\n                  ></kendo-combobox>\n                </td>\n                <td>\n                  <kendo-combobox\n                    [data]=\"roleSuggestions()\"\n                    textField=\"label\"\n                    valueField=\"roleId\"\n                    [allowCustom]=\"true\"\n                    [filterable]=\"true\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"primaryRoleId\"\n                    (open)=\"loadRoleSuggestionsForType(row)\"\n                  ></kendo-combobox>\n                </td>\n                <td class=\"narrow\">\n                  <kendo-dropdownlist\n                    [data]=\"directionOptions()\"\n                    textField=\"text\"\n                    valueField=\"value\"\n                    [valuePrimitive]=\"true\"\n                    formControlName=\"primaryDirection\"\n                  ></kendo-dropdownlist>\n                </td>\n                <td>\n                  <input\n                    kendoTextBox\n                    formControlName=\"secondaryRoleIds\"\n                    [placeholder]=\"messages().secondaryRolesHint\"\n                  />\n                </td>\n                <td class=\"narrow\">\n                  <kendo-numerictextbox\n                    formControlName=\"sortIndex\"\n                    [decimals]=\"0\"\n                    format=\"n0\"\n                    [spinners]=\"false\"\n                  ></kendo-numerictextbox>\n                </td>\n                <td><input kendoTextBox formControlName=\"icon\" /></td>\n                <td class=\"actions\">\n                  <button\n                    kendoButton\n                    fillMode=\"flat\"\n                    [svgIcon]=\"removeIcon\"\n                    [title]=\"messages().removeRule\"\n                    (click)=\"removePerspective($index)\"\n                  ></button>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n  }\n</div>\n", styles: [":host{display:block;padding:16px 20px}.header{margin-bottom:16px}.header .title{margin:0 0 4px;font-size:1.1rem;font-weight:600}.header .description{margin:0;max-width:70ch;color:var(--kendo-color-subtle, #6c757d);font-size:.85rem}.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.toolbar .toolbar-spacer{flex:1}.hint,.empty{padding:12px 14px;border:1px solid var(--kendo-color-border, #dee2e6);border-radius:4px;background:var(--kendo-color-surface-alt, #f8f9fa);color:var(--kendo-color-subtle, #6c757d);font-size:.9rem}.table-wrap{overflow-x:auto}.rules{width:100%;border-collapse:collapse}.rules th,.rules td{padding:6px 8px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--kendo-color-border, #dee2e6)}.rules th{font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--kendo-color-subtle, #6c757d);font-weight:600}.rules td input,.rules td kendo-numerictextbox,.rules td kendo-dropdownlist{width:100%}.rules .narrow{width:120px}.rules .actions{width:48px;text-align:center}\n"] }]
         }], propDecorators: { messages: [{ type: i0.Input, args: [{ isSignal: true, alias: "messages", required: false }] }] } });
 
 var treeNavigationSettings_component = /*#__PURE__*/Object.freeze({