spiderly 19.8.1 → 19.8.3

package/fesm2022/spiderly.mjs

@@ -17,7 +17,7 @@ import { TooltipModule } from 'primeng/tooltip';
 import * as FileSaver from 'file-saver';
 import mime from 'mime';
 import 'reflect-metadata';
-import { map, Subject, throttleTime, BehaviorSubject, of, filter as filter$1, firstValueFrom, finalize as finalize$1, tap as tap$1 } from 'rxjs';
+import { map, Subject, throttleTime, BehaviorSubject, of, filter as filter$1, firstValueFrom, take, finalize as finalize$1, tap as tap$1, throwError } from 'rxjs';
 import * as i4$2 from 'primeng/checkbox';
 import { CheckboxModule } from 'primeng/checkbox';
 import * as i4$3 from 'primeng/colorpicker';
@@ -36,7 +36,10 @@ import * as i3$1 from 'primeng/select';
 import { SelectModule } from 'primeng/select';
 import * as i4$8 from 'primeng/editor';
 import { EditorModule, Editor } from 'primeng/editor';
-import * as i5$2 from 'primeng/fileupload';
+import * as i5$2 from 'primeng/tabs';
+import { TabsModule } from 'primeng/tabs';
+import { MarkdownComponent } from 'ngx-markdown';
+import * as i5$3 from 'primeng/fileupload';
 import { FileUploadModule } from 'primeng/fileupload';
 import * as i12 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
@@ -46,10 +49,9 @@ import * as i3$2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import * as i1$1 from 'primeng/api';
 import { ConfirmationService } from 'primeng/api';
+import { filter, map as map$1, finalize, catchError, delay, tap, takeUntil } from 'rxjs/operators';
 import * as i1$2 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpErrorResponse, HttpResponse } from '@angular/common/http';
-import { map as map$1, finalize, delay, tap, filter, takeUntil, catchError } from 'rxjs/operators';
-import * as i3$3 from '@abacritt/angularx-social-login';
 import { InputOtp } from 'primeng/inputotp';
 import * as i2$1 from 'primeng/menu';
 import { MenuModule } from 'primeng/menu';
@@ -80,17 +82,22 @@ const ApiErrorCodes = {
     UniqueViolation: 'unique_violation',
     ForeignKeyViolation: 'foreign_key_violation',
     ConcurrencyConflict: 'concurrency_conflict',
+    EmailNotVerified: 'email_not_verified',
+    ExternalProviderNotConfigured: 'external_provider_not_configured',
 };
 
 class BaseControl {
     constructor(translocoService) {
         this.translocoService = translocoService;
         this.disabled = false;
+        /** Whether the field's label is rendered. Defaults to `true`. */
         this.showLabel = true;
+        /** Whether the required (*) indicator is shown next to the label. Defaults to `true`. */
         this.showRequired = true;
         this.label = null; // NgModel/Want custom translation
         this.controlValid = true; // NgModel
         this.placeholder = '';
+        /** Whether the info tooltip icon is shown next to the label. Defaults to `false`. */
         this.showTooltip = false;
         this.tooltipText = null;
         this.tooltipIcon = 'pi pi-info-circle';
@@ -143,6 +150,7 @@ class BaseDropdownControl extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        /** Whether an addon button is shown next to the dropdown. Defaults to `false`. */
         this.showAddon = false;
         this.addonIcon = 'pi pi-ellipsis-h';
         this.placeholder = this.translocoService.translate('SelectFromTheList');
@@ -390,6 +398,7 @@ class SpiderlyAutocompleteComponent extends BaseAutocompleteControl {
         this.translocoService = translocoService;
         this.validatorService = validatorService;
         this.appendTo = 'body';
+        /** Whether a clear button is shown. Defaults to `true`. */
         this.showClear = true;
         this.helperFormControl = new SpiderlyFormControl(null, {
             updateOn: 'change',
@@ -622,10 +631,11 @@ function exportListToExcel(exportListToExcelObservableMethod, filter) {
         FileSaver.saveAs(res.body, decodeURIComponent(fileName));
     });
 }
+function getPrimengNamebookOptions(namebookList) {
+    return namebookList.map((x) => ({ label: x.displayName, code: x.id }));
+}
 function getPrimengDropdownNamebookOptions(getDropdownListObservable, parentEntityId) {
-    return getDropdownListObservable(parentEntityId ?? 0).pipe(map((res) => {
-        return res.map((x) => ({ label: x.displayName, code: x.id }));
-    }));
+    return getDropdownListObservable(parentEntityId ?? 0).pipe(map((res) => getPrimengNamebookOptions(res)));
 }
 function getPrimengDropdownCodebookOptions(getDropdownListObservable) {
     return getDropdownListObservable().pipe(map((res) => {
@@ -675,25 +685,6 @@ function kebabToTitleCase(input) {
         .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
         .join(' ');
 }
-/**
- * Custom styling of the google button - https://medium.com/simform-engineering/implement-custom-google-sign-in-using-angular-16-9c93aeff6252
- */
-function createFakeGoogleWrapper() {
-    const googleLoginWrapper = document.createElement('div');
-    googleLoginWrapper.style.display = 'none';
-    googleLoginWrapper.classList.add('custom-google-button');
-    document.body.appendChild(googleLoginWrapper);
-    window.google.accounts.id.renderButton(googleLoginWrapper, {
-        type: 'icon',
-        width: '200',
-    });
-    const googleLoginWrapperButton = googleLoginWrapper.querySelector('div[role=button]');
-    return {
-        click: () => {
-            googleLoginWrapperButton?.click();
-        },
-    };
-}
 const PROPS_KEY = Symbol('props');
 function ReflectProp(target, propertyKey) {
     const props = Reflect.getMetadata(PROPS_KEY, target) || [];
@@ -720,6 +711,7 @@ class SpiderlyCalendarComponent extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        /** Whether the time picker is shown in addition to the date. Defaults to `false`. */
         this.showTime = false;
         this.dateOnly = false;
         this.timeOnly = false;
@@ -880,6 +872,7 @@ class SpiderlyColorPickerComponent extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        /** Whether a hex text input is shown alongside the color swatch. Defaults to `true`. */
         this.showInputTextField = true;
     }
     ngOnInit() {
@@ -937,6 +930,7 @@ class SpiderlyPasswordComponent extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        /** Whether a password-strength meter is shown below the field. Defaults to `false`. */
         this.showPasswordStrength = false;
     }
     ngOnInit() {
@@ -962,6 +956,7 @@ class SpiderlyTextboxComponent extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        /** Whether an icon button is appended to the input. Defaults to `false`. */
         this.showButton = false;
         this.onButtonClick = new EventEmitter();
     }
@@ -1039,6 +1034,7 @@ class SpiderlyNumberComponent extends BaseControl {
     constructor(translocoService) {
         super(translocoService);
         this.translocoService = translocoService;
+        /** Whether increment/decrement spinner buttons are shown. Defaults to `true`. */
         this.showButtons = true;
         this.maxFractionDigits = 0;
     }
@@ -1171,6 +1167,114 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 
+/**
+ * Markdown form control: a plain textarea (Write) with a rendered live preview (Preview),
+ * arranged as tabs. The stored value is raw Markdown text.
+ *
+ * The preview is rendered with ngx-markdown (marked) and is intentionally APPROXIMATE — a
+ * consuming storefront may render the same Markdown with a different engine/flavor.
+ *
+ * The <textarea> DOM is the source of truth for the text (the form control mirrors it, like
+ * spiderly-editor mirrors Quill). We never splice control.value, because SpiderlyFormControl
+ * defaults to updateOn:'blur' and would be stale relative to the focused textarea.
+ *
+ * When {@link uploadImageMethod} is provided (wired by the generator for properties with an
+ * S3 public-storage attribute), pasting an image uploads it and, on success, inserts a
+ * standard `![](url)` link at the caret via execCommand (which preserves the native undo
+ * stack). Upload progress is shown out-of-band, not as a token in the text.
+ */
+class SpiderlyMarkdownComponent extends BaseControl {
+    constructor(translocoService) {
+        super(translocoService);
+        this.translocoService = translocoService;
+        this.objectId = 0;
+        this.pendingImageUploads = 0;
+        this.imageUploadFailed = false;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    onPaste(event) {
+        // Only intercept when image upload is wired; otherwise let the default paste happen.
+        if (!this.uploadImageMethod || this.control?.disabled)
+            return;
+        const imageFile = this.getPastedImage(event);
+        if (!imageFile)
+            return;
+        event.preventDefault();
+        const formData = new FormData();
+        formData.append('file', imageFile, `${this.objectId}-${imageFile.name || 'pasted-image.png'}`);
+        this.imageUploadFailed = false;
+        this.pendingImageUploads++;
+        this.uploadImageMethod(formData).subscribe({
+            next: (result) => {
+                this.pendingImageUploads--;
+                this.insertImageMarkdown(result.url);
+            },
+            error: () => {
+                this.pendingImageUploads--;
+                this.imageUploadFailed = true;
+            },
+        });
+    }
+    getPastedImage(event) {
+        const items = event.clipboardData?.items;
+        if (!items)
+            return null;
+        for (let i = 0; i < items.length; i++) {
+            if (items[i].type.startsWith('image/')) {
+                return items[i].getAsFile();
+            }
+        }
+        return null;
+    }
+    insertImageMarkdown(url) {
+        const snippet = `![](${url})`;
+        const textarea = this.textareaRef?.nativeElement;
+        // Preferred path: the textarea is focused, so insert at the caret while preserving the
+        // native undo stack. The resulting 'input' event syncs the control on blur, exactly like
+        // the user typing — no manual setValue, no stale-model read.
+        if (textarea && document.activeElement === textarea && document.execCommand('insertText', false, snippet)) {
+            return;
+        }
+        // Fallback (textarea blurred/absent, or execCommand unsupported): read the LIVE textarea
+        // value — never control.value, which is stale while focused. When blurred, the control is
+        // already current, so appending can't drop uncommitted text.
+        if (textarea) {
+            const sep = textarea.value.length ? '\n' : '';
+            textarea.value = `${textarea.value}${sep}${snippet}`;
+            this.control.setValue(textarea.value);
+        }
+        else {
+            const current = this.control.value ?? '';
+            this.control.setValue(current.length ? `${current}\n${snippet}` : snippet);
+        }
+        this.control.markAsDirty();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMarkdownComponent, deps: [{ token: i1.TranslocoService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyMarkdownComponent, isStandalone: true, selector: "spiderly-markdown", inputs: { uploadImageMethod: "uploadImageMethod", objectId: "objectId" }, viewQueries: [{ propertyName: "textareaRef", first: true, predicate: ["textarea"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <ng-container *transloco=\"let t\">\n    <p-tabs *ngIf=\"control\" value=\"write\">\n      <p-tablist>\n        <p-tab value=\"write\">{{ t('Write') }}</p-tab>\n        <p-tab value=\"preview\">{{ t('Preview') }}</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"write\">\n          <textarea\n            #textarea\n            pTextarea\n            [formControl]=\"control\"\n            [id]=\"control.label\"\n            (blur)=\"control.markAsDirty()\"\n            (paste)=\"onPaste($event)\"\n            [autoResize]=\"true\"\n            [class]=\"control.disabled ? 'disabled' : ''\"\n            [style]=\"{ width: '100%', minHeight: '320px' }\"\n          ></textarea>\n          <small *ngIf=\"pendingImageUploads > 0\">{{ t('UploadingImage') }}</small>\n          <small *ngIf=\"imageUploadFailed\" class=\"spiderly-error-message\">{{ t('ImageUploadFailed') }}</small>\n        </p-tabpanel>\n        <p-tabpanel value=\"preview\">\n          <div class=\"spiderly-markdown-preview\" style=\"min-height: 320px\">\n            <markdown [data]=\"control.value\"></markdown>\n          </div>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </ng-container>\n\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i4$6.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "variant", "fluid", "pSize"], outputs: ["onResize"] }, { kind: "ngmodule", type: TabsModule }, { kind: "component", type: i5$2.Tabs, selector: "p-tabs", inputs: ["value", "scrollable", "lazy", "selectOnFocus", "showNavigators", "tabindex"], outputs: ["valueChange"] }, { kind: "component", type: i5$2.TabPanels, selector: "p-tabpanels" }, { kind: "component", type: i5$2.TabPanel, selector: "p-tabpanel", inputs: ["value"], outputs: ["valueChange"] }, { kind: "component", type: i5$2.TabList, selector: "p-tablist" }, { kind: "component", type: i5$2.Tab, selector: "p-tab", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyMarkdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-markdown', imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FormsModule,
+                        TextareaModule,
+                        TabsModule,
+                        MarkdownComponent,
+                        RequiredComponent,
+                        TranslocoDirective,
+                    ], template: "<div style=\"display: flex; flex-direction: column; gap: 0.5rem\">\n  <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n    <label>{{ getTranslatedLabel() }}</label>\n    <required *ngIf=\"control?.required && showRequired\"></required>\n  </div>\n\n  <ng-container *transloco=\"let t\">\n    <p-tabs *ngIf=\"control\" value=\"write\">\n      <p-tablist>\n        <p-tab value=\"write\">{{ t('Write') }}</p-tab>\n        <p-tab value=\"preview\">{{ t('Preview') }}</p-tab>\n      </p-tablist>\n      <p-tabpanels>\n        <p-tabpanel value=\"write\">\n          <textarea\n            #textarea\n            pTextarea\n            [formControl]=\"control\"\n            [id]=\"control.label\"\n            (blur)=\"control.markAsDirty()\"\n            (paste)=\"onPaste($event)\"\n            [autoResize]=\"true\"\n            [class]=\"control.disabled ? 'disabled' : ''\"\n            [style]=\"{ width: '100%', minHeight: '320px' }\"\n          ></textarea>\n          <small *ngIf=\"pendingImageUploads > 0\">{{ t('UploadingImage') }}</small>\n          <small *ngIf=\"imageUploadFailed\" class=\"spiderly-error-message\">{{ t('ImageUploadFailed') }}</small>\n        </p-tabpanel>\n        <p-tabpanel value=\"preview\">\n          <div class=\"spiderly-markdown-preview\" style=\"min-height: 320px\">\n            <markdown [data]=\"control.value\"></markdown>\n          </div>\n        </p-tabpanel>\n      </p-tabpanels>\n    </p-tabs>\n  </ng-container>\n\n  <small *ngIf=\"control?.errors && control?.dirty\" class=\"spiderly-error-message\">\n    {{ getValidationErrrorMessages() }}\n  </small>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i1.TranslocoService }], propDecorators: { textareaRef: [{
+                type: ViewChild,
+                args: ['textarea']
+            }], uploadImageMethod: [{
+                type: Input
+            }], objectId: [{
+                type: Input
+            }] } });
+
 class SpiderlyButtonBaseComponent {
     constructor(router) {
         this.router = router;
@@ -1199,13 +1303,15 @@ class SpiderlyButtonBaseComponent {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonBaseComponent, deps: [{ token: i3$2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonBaseComponent, isStandalone: true, selector: "spiderly-button-base", inputs: { icon: "icon", label: "label", outlined: "outlined", rounded: "rounded", styleClass: "styleClass", routerLink: "routerLink", style: "style", class: "class", severity: "severity", size: "size", disabled: "disabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonBaseComponent, isStandalone: true, selector: "spiderly-button-base", inputs: { icon: "icon", iconUrl: "iconUrl", label: "label", outlined: "outlined", rounded: "rounded", styleClass: "styleClass", routerLink: "routerLink", style: "style", class: "class", severity: "severity", size: "size", disabled: "disabled" }, outputs: { onClick: "onClick" }, ngImport: i0, template: ``, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: SplitButtonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonBaseComponent, decorators: [{
             type: Component,
             args: [{ selector: 'spiderly-button-base', template: ``, imports: [CommonModule, ButtonModule, SplitButtonModule] }]
         }], ctorParameters: () => [{ type: i3$2.Router }], propDecorators: { icon: [{
                 type: Input
+            }], iconUrl: [{
+                type: Input
             }], label: [{
                 type: Input
             }], outlined: [{
@@ -1239,11 +1345,11 @@ class SpiderlyButtonComponent extends SpiderlyButtonBaseComponent {
         this.type = 'button';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonComponent, isStandalone: true, selector: "spiderly-button", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<p-button\n  (onClick)=\"handleClick($event)\"\n  [label]=\"label\"\n  [icon]=\"icon\"\n  [outlined]=\"outlined\"\n  [styleClass]=\"styleClass\"\n  [severity]=\"severity\"\n  [rounded]=\"rounded\"\n  [style]=\"style\"\n  [class]=\"class\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [type]=\"type\"\n>\n  <ng-content></ng-content>\n</p-button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i12.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SplitButtonModule }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyButtonComponent, isStandalone: true, selector: "spiderly-button", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<p-button\n  (onClick)=\"handleClick($event)\"\n  [label]=\"iconUrl ? undefined : label\"\n  [icon]=\"icon\"\n  [outlined]=\"outlined\"\n  [styleClass]=\"styleClass\"\n  [severity]=\"severity\"\n  [rounded]=\"rounded\"\n  [style]=\"style\"\n  [class]=\"class\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [type]=\"type\"\n>\n  <ng-container *ngIf=\"iconUrl\">\n    <img [src]=\"iconUrl\" [alt]=\"label\" style=\"height: 16px; width: 16px; margin-right: 8px\" />\n    <span>{{ label }}</span>\n  </ng-container>\n  <ng-content></ng-content>\n</p-button>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i12.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "autofocus", "fluid", "buttonProps"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SplitButtonModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'spiderly-button', imports: [CommonModule, ButtonModule, SplitButtonModule], template: "<p-button\n  (onClick)=\"handleClick($event)\"\n  [label]=\"label\"\n  [icon]=\"icon\"\n  [outlined]=\"outlined\"\n  [styleClass]=\"styleClass\"\n  [severity]=\"severity\"\n  [rounded]=\"rounded\"\n  [style]=\"style\"\n  [class]=\"class\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [type]=\"type\"\n>\n  <ng-content></ng-content>\n</p-button>\n" }]
+            args: [{ selector: 'spiderly-button', imports: [CommonModule, ButtonModule, SplitButtonModule], template: "<p-button\n  (onClick)=\"handleClick($event)\"\n  [label]=\"iconUrl ? undefined : label\"\n  [icon]=\"icon\"\n  [outlined]=\"outlined\"\n  [styleClass]=\"styleClass\"\n  [severity]=\"severity\"\n  [rounded]=\"rounded\"\n  [style]=\"style\"\n  [class]=\"class\"\n  [disabled]=\"disabled\"\n  [size]=\"size\"\n  [type]=\"type\"\n>\n  <ng-container *ngIf=\"iconUrl\">\n    <img [src]=\"iconUrl\" [alt]=\"label\" style=\"height: 16px; width: 16px; margin-right: 8px\" />\n    <span>{{ label }}</span>\n  </ng-container>\n  <ng-content></ng-content>\n</p-button>\n" }]
         }], propDecorators: { type: [{
                 type: Input
             }] } });
@@ -1415,7 +1521,7 @@ class SpiderlyFileComponent extends BaseControl {
         return isExcelFileType(mimeType);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, deps: [{ token: i1.TranslocoService }, { token: SpiderlyMessageService }, { token: ValidatorAbstractService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", isUrlFileData: "isUrlFileData", imageWidth: "imageWidth", imageHeight: "imageHeight", maxFileSize: "maxFileSize", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 1px\">\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n      <label>{{ getTranslatedLabel() }}</label>\n      <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n      <required *ngIf=\"control?.required || required\"></required>\n    </div>\n\n    <p-fileUpload\n      [files]=\"files\"\n      [disabled]=\"disabled\"\n      [name]=\"control?.label ?? label\"\n      [multiple]=\"multiple\"\n      [accept]=\"acceptedFileTypesCommaSeparated\"\n      [maxFileSize]=\"maxFileSize\"\n      (onSelect)=\"filesSelected($event)\"\n      [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n    >\n      <ng-template\n        pTemplate=\"header\"\n        let-files\n        let-chooseCallback=\"chooseCallback\"\n        let-clearCallback=\"clearCallback\"\n        let-uploadCallback=\"uploadCallback\"\n      >\n        <div\n          class=\"flex flex-wrap justify-between items-center flex-1 gap-2\"\n        >\n          <div class=\"flex gap-2\">\n            <spiderly-button\n              [disabled]=\"disabled\"\n              (onClick)=\"choose($event, chooseCallback)\"\n              icon=\"pi pi-upload\"\n              [rounded]=\"true\"\n              [outlined]=\"true\"\n            />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template\n        pTemplate=\"content\"\n        let-files\n        let-removeFileCallback=\"removeFileCallback\"\n      >\n        <div *ngIf=\"existingFileUrl\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"existingFileIsImage\" class=\"image-container\">\n                <img [src]=\"existingFileUrl\" />\n              </div>\n              <div *ngIf=\"!existingFileIsImage\">\n                <i class=\"pi pi-file\" style=\"margin-right: 4px\"></i>\n                <span>{{ existingFileName }}</span>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"removeExistingFile()\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!existingFileUrl && files.length > 0\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isFileImageType(file.type)\" class=\"image-container\">\n                <img role=\"presentation\" [src]=\"file.objectURL\" />\n              </div>\n              <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n                <div class=\"excel-details\">\n                  <i\n                    class=\"pi pi-file-excel\"\n                    style=\"color: green; margin-right: 4px\"\n                  ></i>\n                  <span class=\"file-name\">{{ file.name }}</span>\n                </div>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"fileRemoved(removeFileCallback, index)\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"file\"> </ng-template>\n      <ng-template pTemplate=\"empty\">\n        <div *ngIf=\"!existingFileUrl\" class=\"flex items-center justify-center flex-col\">\n          <i\n            class=\"pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-gray-400 border-gray-400 mt-4\"\n          ></i>\n          <p class=\"mt-6 mb-0\">{{ t(\"DragAndDropFilesHereToUpload\") }}</p>\n        </div>\n      </ng-template>\n    </p-fileUpload>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i5$2.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: SpiderlyFileComponent, isStandalone: true, selector: "spiderly-file", inputs: { objectId: "objectId", fileData: "fileData", acceptedFileTypes: "acceptedFileTypes", required: "required", multiple: "multiple", isUrlFileData: "isUrlFileData", imageWidth: "imageWidth", imageHeight: "imageHeight", maxFileSize: "maxFileSize", files: "files" }, outputs: { onFileSelected: "onFileSelected", onFileRemoved: "onFileRemoved" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div style=\"display: flex; flex-direction: column; gap: 0.5rem; padding: 1px\">\n    <div *ngIf=\"getTranslatedLabel() != '' && getTranslatedLabel() != null\">\n      <label>{{ getTranslatedLabel() }}</label>\n      <!-- It's okay for this control, because for the custom uploads where we are not initializing the control from the backend, there is no need for formControl. -->\n      <required *ngIf=\"control?.required || required\"></required>\n    </div>\n\n    <p-fileUpload\n      [files]=\"files\"\n      [disabled]=\"disabled\"\n      [name]=\"control?.label ?? label\"\n      [multiple]=\"multiple\"\n      [accept]=\"acceptedFileTypesCommaSeparated\"\n      [maxFileSize]=\"maxFileSize\"\n      (onSelect)=\"filesSelected($event)\"\n      [class]=\"control?.invalid && control?.dirty ? 'control-error-border' : ''\"\n    >\n      <ng-template\n        pTemplate=\"header\"\n        let-files\n        let-chooseCallback=\"chooseCallback\"\n        let-clearCallback=\"clearCallback\"\n        let-uploadCallback=\"uploadCallback\"\n      >\n        <div\n          class=\"flex flex-wrap justify-between items-center flex-1 gap-2\"\n        >\n          <div class=\"flex gap-2\">\n            <spiderly-button\n              [disabled]=\"disabled\"\n              (onClick)=\"choose($event, chooseCallback)\"\n              icon=\"pi pi-upload\"\n              [rounded]=\"true\"\n              [outlined]=\"true\"\n            />\n          </div>\n        </div>\n      </ng-template>\n      <ng-template\n        pTemplate=\"content\"\n        let-files\n        let-removeFileCallback=\"removeFileCallback\"\n      >\n        <div *ngIf=\"existingFileUrl\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"existingFileIsImage\" class=\"image-container\">\n                <img [src]=\"existingFileUrl\" />\n              </div>\n              <div *ngIf=\"!existingFileIsImage\">\n                <i class=\"pi pi-file\" style=\"margin-right: 4px\"></i>\n                <span>{{ existingFileName }}</span>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"removeExistingFile()\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n        <div *ngIf=\"!existingFileUrl && files.length > 0\">\n          <div class=\"flex justify-center p-0 gap-8\">\n            <div\n              *ngFor=\"let file of files; let index = index\"\n              class=\"card m-0 px-4 py-4 flex flex-col items-center gap-4\"\n              style=\"justify-content: center; overflow: hidden\"\n            >\n              <div *ngIf=\"isFileImageType(file.type)\" class=\"image-container\">\n                <img role=\"presentation\" [src]=\"file.objectURL\" />\n              </div>\n              <div *ngIf=\"isExcelFileType(file.type)\" class=\"excel-container\">\n                <div class=\"excel-details\">\n                  <i\n                    class=\"pi pi-file-excel\"\n                    style=\"color: green; margin-right: 4px\"\n                  ></i>\n                  <span class=\"file-name\">{{ file.name }}</span>\n                </div>\n              </div>\n              <spiderly-button\n                [disabled]=\"disabled\"\n                icon=\"pi pi-times\"\n                (onClick)=\"fileRemoved(removeFileCallback, index)\"\n                [outlined]=\"true\"\n                [rounded]=\"true\"\n                severity=\"danger\"\n              />\n            </div>\n          </div>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"file\"> </ng-template>\n      <ng-template pTemplate=\"empty\">\n        <div *ngIf=\"!existingFileUrl\" class=\"flex items-center justify-center flex-col\">\n          <i\n            class=\"pi pi-cloud-upload border-2 rounded-full p-8 text-8xl text-gray-400 border-gray-400 mt-4\"\n          ></i>\n          <p class=\"mt-6 mb-0\">{{ t(\"DragAndDropFilesHereToUpload\") }}</p>\n        </div>\n      </ng-template>\n    </p-fileUpload>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FileUploadModule }, { kind: "component", type: i5$3.FileUpload, selector: "p-fileupload, p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "chooseButtonProps", "uploadButtonProps", "cancelButtonProps", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { kind: "directive", type: i1$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: RequiredComponent, selector: "required" }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyFileComponent, decorators: [{
             type: Component,
@@ -1508,6 +1614,7 @@ class SpiderlyControlsModule {
             SpiderlyNumberComponent,
             SpiderlyDropdownComponent,
             SpiderlyEditorComponent,
+            SpiderlyMarkdownComponent,
             SpiderlyColorPickerComponent,
             SpiderlyFileComponent], exports: [SpiderlyTextboxComponent,
             SpiderlyTextareaComponent,
@@ -1522,6 +1629,7 @@ class SpiderlyControlsModule {
             SpiderlyNumberComponent,
             SpiderlyDropdownComponent,
             SpiderlyEditorComponent,
+            SpiderlyMarkdownComponent,
             SpiderlyColorPickerComponent,
             SpiderlyFileComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyControlsModule, imports: [SpiderlyTextboxComponent,
@@ -1537,6 +1645,7 @@ class SpiderlyControlsModule {
             SpiderlyNumberComponent,
             SpiderlyDropdownComponent,
             SpiderlyEditorComponent,
+            SpiderlyMarkdownComponent,
             SpiderlyColorPickerComponent,
             SpiderlyFileComponent] }); }
 }
@@ -1557,6 +1666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyNumberComponent,
                         SpiderlyDropdownComponent,
                         SpiderlyEditorComponent,
+                        SpiderlyMarkdownComponent,
                         SpiderlyColorPickerComponent,
                         SpiderlyFileComponent,
                     ],
@@ -1574,6 +1684,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                         SpiderlyNumberComponent,
                         SpiderlyDropdownComponent,
                         SpiderlyEditorComponent,
+                        SpiderlyMarkdownComponent,
                         SpiderlyColorPickerComponent,
                         SpiderlyFileComponent,
                     ],
@@ -1582,95 +1693,494 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 }]
         }] });
 
-class UserBase extends BaseEntity {
-    static { this.typeName = 'UserBase'; }
-    constructor({ id, email, } = {}) {
+class InitCompanyAuthDialogDetails extends BaseEntity {
+    constructor({ image, companyName, } = {}) {
         super();
-        this.id = id;
-        this.email = email;
+        this.image = image;
+        this.companyName = companyName;
     }
-    static { this.schema = {
-        id: {
-            type: 'number',
-        },
-        email: {
-            type: 'string',
-        },
-    }; }
+    static { this.typeName = 'InitCompanyAuthDialogDetails'; }
 }
-class AuthResult extends BaseEntity {
-    static { this.typeName = 'AuthResult'; }
-    constructor({ userId, email, accessToken, refreshToken, } = {}) {
-        super();
-        this.userId = userId;
-        this.email = email;
-        this.accessToken = accessToken;
-        this.refreshToken = refreshToken;
+
+class ConfigServiceBase {
+    constructor() {
+        this.production = false;
+        this.frontendUrl = 'http://localhost:4200';
+        this.companyName = 'Company Name';
+        this.primaryColor = '#111b2c';
+        /* URLs */
+        this.loginSlug = 'login';
+        /* Local storage */
+        this.accessTokenKey = 'access_token';
+        this.refreshTokenKey = 'refresh_token';
+        this.browserIdKey = 'browser_id';
+        this.httpOptions = {};
+        this.httpSkipSpinnerOptions = {
+            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+            params: new HttpParams().set('X-Skip-Spinner', 'true'),
+        };
+        this.logoPath = 'assets/images/logo/logo.svg';
+        /* Pagination */
+        this.defaultPageSize = 10;
     }
-    static { this.schema = {
-        userId: {
-            type: 'number',
-        },
-        email: {
-            type: 'string',
-        },
-        accessToken: {
-            type: 'string',
-        },
-        refreshToken: {
-            type: 'string',
-        },
-    }; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, providedIn: 'root' }); }
 }
-class VerificationTokenRequest extends BaseEntity {
-    static { this.typeName = 'VerificationTokenRequest'; }
-    constructor({ verificationCode, browserId, email, } = {}) {
-        super();
-        this.verificationCode = verificationCode;
-        this.browserId = browserId;
-        this.email = email;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class ApiSecurityService {
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+        //#region Authentication
+        this.login = (request) => {
+            return this.http.post(`${this.config.apiUrl}/Security/Login`, request, this.config.httpOptions);
+        };
+        this.sendLoginVerificationEmail = (loginDTO) => {
+            return this.http.post(`${this.config.apiUrl}/Security/SendLoginVerificationEmail`, loginDTO, this.config.httpOptions);
+        };
+        this.loginWithCookies = (request) => {
+            return this.http.post(`${this.config.apiUrl}/Security/LoginWithCookies`, request, this.config.httpOptions);
+        };
+        this.getExternalProviders = () => {
+            return this.http.get(`${this.config.apiUrl}/Security/GetExternalProviders`, this.config.httpSkipSpinnerOptions);
+        };
+        this.logout = (browserId) => {
+            return this.http.get(`${this.config.apiUrl}/Security/Logout?browserId=${browserId}`);
+        };
+        this.logoutWithCookies = (browserId) => {
+            return this.http.get(`${this.config.apiUrl}/Security/LogoutWithCookies?browserId=${browserId}`);
+        };
+        this.refreshTokenWithHeaders = (request) => {
+            return this.http.post(`${this.config.apiUrl}/Security/RefreshTokenWithHeaders`, request, this.config.httpOptions);
+        };
+        this.refreshTokenWithCookies = (browserId) => {
+            // POST, not GET: refresh rotates the single-use token (a state mutation), and a cacheable GET let
+            // browsers replay a stale logged-in response on back/forward navigation (phantom dashboard after logout).
+            return this.http.post(`${this.config.apiUrl}/Security/RefreshTokenWithCookies?browserId=${browserId}`, null);
+        };
+        //#endregion
+        //#region User
+        this.getCurrentUserBase = () => {
+            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserBase`, this.config.httpSkipSpinnerOptions);
+        };
+        this.getCurrentUserPermissionCodes = () => {
+            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserPermissionCodes`, this.config.httpSkipSpinnerOptions);
+        };
     }
-    static { this.schema = {
-        verificationCode: {
-            type: 'string',
-        },
-        browserId: {
-            type: 'string',
-        },
-        email: {
-            type: 'string',
-        },
-    }; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, deps: [{ token: i1$2.HttpClient }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, providedIn: 'root' }); }
 }
-class ExternalProvider extends BaseEntity {
-    static { this.typeName = 'ExternalProvider'; }
-    constructor({ idToken, browserId, } = {}) {
-        super();
-        this.idToken = idToken;
-        this.browserId = browserId;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: ConfigServiceBase }] });
+
+/**
+ * Cookie-based session auth. The access/refresh JWTs live in HttpOnly cookies set by the backend
+ * (so JS never holds them — XSS can't exfiltrate them); requests are authenticated via
+ * `withCredentials` (see jwtInterceptor). The readable result only carries userId/email/expiry.
+ */
+class AuthServiceBase {
+    constructor(router, http, apiService, config, platformId) {
+        this.router = router;
+        this.http = http;
+        this.apiService = apiService;
+        this.config = config;
+        this.platformId = platformId;
+        this.apiUrl = this.config.apiUrl;
+        // External-login error code captured from the bootstrap URL (?externalAuthError=expired|failed) set by the
+        // backend's OAuth callback on failure. Captured before routing can strip it, surfaced once by the login page.
+        this.externalAuthErrorCode = null;
+        this._currentUserPermissionCodes = new BehaviorSubject(undefined);
+        // The subject seeds with `undefined` (not yet loaded) and emits `null` on logout. Consumers only ever care
+        // about a real code list, so filter both out here — subscribers get a clean `string[]`, and `firstValueFrom`
+        // waits for the first loaded value instead of grabbing the `undefined` seed in a load race.
+        this.currentUserPermissionCodes$ = this._currentUserPermissionCodes
+            .asObservable()
+            .pipe(filter((codes) => codes != null));
+        this._user = new BehaviorSubject(undefined);
+        this.user$ = this._user.asObservable();
+        // Cross-tab sync. We store only marker values here (never tokens — those are HttpOnly cookies).
+        this.storageEventListener = (event) => {
+            if (event.storageArea === localStorage) {
+                if (event.key === 'logout-event') {
+                    this.stopTokenTimer();
+                    this._user.next(null);
+                    this._currentUserPermissionCodes.next(null);
+                }
+                if (event.key === 'login-event') {
+                    this.refreshToken().subscribe();
+                }
+            }
+        };
+        this.onAfterLogout = () => {
+            this._currentUserPermissionCodes.next(null);
+            this.router.navigate([this.config.loginSlug]);
+        };
+        this.onAfterRefreshToken = () => {
+            this.setCurrentUserPermissionCodes().subscribe(); // after the session is re-established
+        };
+        this.initCompanyAuthDialogDetails = () => {
+            return of(new InitCompanyAuthDialogDetails({
+                image: this.config.logoPath,
+                companyName: this.config.companyName,
+            }));
+        };
+        this.onAfterNgOnDestroy = () => { };
+        if (isPlatformBrowser(platformId)) {
+            window.addEventListener('storage', this.storageEventListener);
+        }
     }
-    static { this.schema = {
-        idToken: {
-            type: 'string',
-        },
-        browserId: {
-            type: 'string',
-        },
-    }; }
-}
-class UserRole extends BaseEntity {
-    static { this.typeName = 'UserRole'; }
-    constructor({ roleId, userId, } = {}) {
-        super();
-        this.roleId = roleId;
-        this.userId = userId;
+    sendLoginVerificationEmail(body) {
+        body.browserId = this.getBrowserId();
+        return this.apiService.sendLoginVerificationEmail(body);
     }
-    static { this.schema = {
-        roleId: {
-            type: 'number',
-        },
-        userId: {
-            type: 'number',
+    login(body) {
+        body.browserId = this.getBrowserId();
+        return this.apiService.loginWithCookies(body).pipe(map$1((result) => {
+            this.handleAuthResult(result);
+            return result;
+        }));
+    }
+    // Establishes the in-memory session from a cookie auth result (login or refresh). No tokens are stored
+    // in JS — only the user identity + the access-token expiry the backend reports (to schedule refresh).
+    handleAuthResult(result) {
+        this._user.next({
+            id: result.userId,
+            email: result.email,
+        });
+        this.accessTokenExpiresAt = result.accessTokenExpiresAt
+            ? new Date(result.accessTokenExpiresAt)
+            : undefined;
+        localStorage.setItem('login-event', 'login' + Math.random());
+        this.startTokenTimer();
+        this.setCurrentUserPermissionCodes().subscribe();
+    }
+    logout() {
+        const browserId = this.getBrowserId();
+        this.apiService
+            .logoutWithCookies(browserId)
+            .pipe(finalize(() => {
+            this._user.next(null);
+            localStorage.setItem('logout-event', 'logout' + Math.random());
+            this.onAfterLogout();
+            this.stopTokenTimer();
+        }))
+            .subscribe();
+    }
+    // Clears in-memory session state without calling the backend — used when a request comes back 401
+    // (the backend has already cleared the auth cookies in that case).
+    clearSession() {
+        this.stopTokenTimer();
+        this._user.next(null);
+        this._currentUserPermissionCodes.next(null);
+        localStorage.setItem('logout-event', 'logout' + Math.random());
+    }
+    // Called on app init and by the proactive timer. The refresh token is an HttpOnly cookie; a 401 ("no valid
+    // session" — not logged in / expired) propagates from the interceptor and is handled by catchError below,
+    // resolving the session to anonymous (null). map runs only for a real result, so _user is never partial.
+    refreshToken() {
+        const browserId = this.getBrowserId();
+        return this.apiService.refreshTokenWithCookies(browserId).pipe(map$1((result) => {
+            if (result) {
+                // A re-established session makes any pending external-login error moot — drop it so it can't
+                // surface as a stale toast on a later /login visit (e.g. after a subsequent logout).
+                this.externalAuthErrorCode = null;
+                this._user.next({ id: result.userId, email: result.email });
+                this.accessTokenExpiresAt = result.accessTokenExpiresAt
+                    ? new Date(result.accessTokenExpiresAt)
+                    : undefined;
+                this.startTokenTimer();
+                this.onAfterRefreshToken();
+            }
+            return result;
+        }), catchError(() => {
+            this._user.next(null);
+            return of(null);
+        }));
+    }
+    // Reads ?externalAuthError= from the bootstrap URL (set by the backend OAuth callback on failure) and
+    // strips it so a manual refresh won't re-trigger the message. Called from the app initializer, before the
+    // router runs — otherwise an unauthenticated landing on "/" redirects to /login and drops the param.
+    captureExternalAuthError() {
+        if (isPlatformBrowser(this.platformId) === false) {
+            return;
+        }
+        const params = new URLSearchParams(window.location.search);
+        const code = params.get('externalAuthError');
+        if (!code) {
+            return;
+        }
+        this.externalAuthErrorCode = code;
+        params.delete('externalAuthError');
+        const query = params.toString();
+        history.replaceState(history.state, '', window.location.pathname + (query ? `?${query}` : '') + window.location.hash);
+    }
+    getBrowserId() {
+        let browserId = localStorage.getItem(this.config.browserIdKey); // not a token — a stable per-browser id
+        if (!browserId) {
+            browserId = crypto.randomUUID();
+            localStorage.setItem(this.config.browserIdKey, browserId);
+        }
+        return browserId;
+    }
+    getTokenRemainingTime() {
+        if (!this.accessTokenExpiresAt) {
+            return 0;
+        }
+        return this.accessTokenExpiresAt.getTime() - Date.now();
+    }
+    startTokenTimer() {
+        const timeout = this.getTokenRemainingTime();
+        if (timeout <= 0) {
+            return;
+        }
+        this.stopTokenTimer();
+        this.timer = of(true)
+            .pipe(delay(timeout), tap({
+            next: () => this.refreshToken().subscribe(),
+        }))
+            .subscribe();
+    }
+    stopTokenTimer() {
+        this.timer?.unsubscribe();
+    }
+    navigateToDashboard() {
+        this.router.navigate(['/']);
+    }
+    setCurrentUserPermissionCodes() {
+        return this.apiService.getCurrentUserPermissionCodes().pipe(map$1((permissionCodes) => {
+            this._currentUserPermissionCodes.next(permissionCodes);
+            return permissionCodes;
+        }));
+    }
+    ngOnDestroy() {
+        if (isPlatformBrowser(this.platformId)) {
+            window.removeEventListener('storage', this.storageEventListener);
+        }
+        this.onAfterNgOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, deps: [{ token: i3$2.Router }, { token: i1$2.HttpClient }, { token: ApiSecurityService }, { token: ConfigServiceBase }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$2.HttpClient }, { type: ApiSecurityService }, { type: ConfigServiceBase }, { type: Object, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }] });
+
+class AuthCardComponent {
+    constructor(authService) {
+        this.authService = authService;
+        this.companyDetailsSubscription = null;
+    }
+    ngOnInit() {
+        this.companyDetailsSubscription = this.authService
+            .initCompanyAuthDialogDetails()
+            .subscribe((details) => {
+            if (details != null) {
+                this.image = details.image;
+                this.companyName = details.companyName;
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.companyDetailsSubscription?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthCardComponent, deps: [{ token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthCardComponent, isStandalone: true, selector: "spiderly-auth-card", ngImport: i0, template: "<div class=\"flex min-h-screen overflow-hidden p-5\">\n  <div class=\"flex flex-col w-full\">\n    <div\n      class=\"w-full sm:w-120\"\n      style=\"\n        margin: auto;\n        border-radius: 50px;\n        padding: 0.3rem;\n        background: linear-gradient(\n          180deg,\n          var(--p-primary-color) 10%,\n          rgba(33, 150, 243, 0) 30%\n        );\n      \"\n    >\n      <div class=\"surface-card py-12 px-8 sm:px-12\" style=\"border-radius: 45px\">\n        <div class=\"flex justify-center\" style=\"margin-bottom: 38px\">\n          <ng-content select=\"[auth-logo]\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              class=\"max-h-15\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </ng-content>\n        </div>\n\n        <ng-content></ng-content>\n\n        <ng-content select=\"[auth-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthCardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-auth-card', imports: [CommonModule], template: "<div class=\"flex min-h-screen overflow-hidden p-5\">\n  <div class=\"flex flex-col w-full\">\n    <div\n      class=\"w-full sm:w-120\"\n      style=\"\n        margin: auto;\n        border-radius: 50px;\n        padding: 0.3rem;\n        background: linear-gradient(\n          180deg,\n          var(--p-primary-color) 10%,\n          rgba(33, 150, 243, 0) 30%\n        );\n      \"\n    >\n      <div class=\"surface-card py-12 px-8 sm:px-12\" style=\"border-radius: 45px\">\n        <div class=\"flex justify-center\" style=\"margin-bottom: 38px\">\n          <ng-content select=\"[auth-logo]\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              class=\"max-h-15\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </ng-content>\n        </div>\n\n        <ng-content></ng-content>\n\n        <ng-content select=\"[auth-footer]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: AuthServiceBase }] });
+
+const GOOGLE_G_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="18" height="18"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.55 10.78l7.98-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/></svg>`;
+/**
+ * Built-in default icons for external auth providers, keyed by provider code.
+ * Values are inline data URIs — no network request, CSP entry, or asset wiring,
+ * and they render offline. Consumers override per code via the `providerIcons`
+ * input on ExternalLoginComponent / SpiderlyLoginComponent.
+ */
+const DEFAULT_EXTERNAL_PROVIDER_ICONS = {
+    google: `data:image/svg+xml,${encodeURIComponent(GOOGLE_G_SVG)}`,
+};
+
+class ExternalLoginComponent {
+    constructor(config, authService, apiService) {
+        this.config = config;
+        this.authService = authService;
+        this.apiService = apiService;
+        /** Per-code icon overrides; unset codes fall back to DEFAULT_EXTERNAL_PROVIDER_ICONS. */
+        this.providerIcons = {};
+        // Config-driven: populated from Security/GetExternalProviders (backend is the single source of truth for which providers are enabled).
+        this.externalProviders = [];
+    }
+    ngOnInit() {
+        this.apiService.getExternalProviders().subscribe({
+            next: (providers) => {
+                this.externalProviders = providers ?? [];
+            },
+            // The global unauthorized interceptor already surfaces the HTTP error to the user; here we just
+            // leave the provider buttons hidden instead of letting the error reach the global error handler.
+            error: () => {
+                this.externalProviders = [];
+            },
+        });
+    }
+    iconFor(code) {
+        return this.providerIcons[code] ?? DEFAULT_EXTERNAL_PROVIDER_ICONS[code];
+    }
+    loginWithExternalProvider(code) {
+        // Server-side flow (B2): hand off to the backend challenge endpoint. The backend runs the OAuth
+        // dance, sets the session cookies, and redirects back to returnUrl.
+        const returnUrl = this.config.frontendUrl;
+        const browserId = this.authService.getBrowserId();
+        window.location.href =
+            `${this.config.apiUrl}/Security/ExternalLoginChallenge` +
+                `?provider=${encodeURIComponent(code)}` +
+                `&returnUrl=${encodeURIComponent(returnUrl)}` +
+                `&browserId=${encodeURIComponent(browserId)}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ExternalLoginComponent, deps: [{ token: ConfigServiceBase }, { token: AuthServiceBase }, { token: ApiSecurityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: ExternalLoginComponent, isStandalone: true, selector: "spiderly-external-login", inputs: { providerIcons: "providerIcons" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"externalProviders.length > 0\">\n    <div\n      style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\"\n    >\n      <div class=\"separator\"></div>\n      <div>{{ t(\"or\") }}</div>\n      <div class=\"separator\"></div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px\">\n      <spiderly-button\n        *ngFor=\"let provider of externalProviders\"\n        (onClick)=\"loginWithExternalProvider(provider.code)\"\n        [label]=\"provider.label || (provider.code | titlecase)\"\n        [iconUrl]=\"iconFor(provider.code)\"\n        [outlined]=\"true\"\n        styleClass=\"w-full\"\n      ></spiderly-button>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.TitleCasePipe, name: "titlecase" }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ExternalLoginComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'spiderly-external-login', imports: [CommonModule, TranslocoDirective, SpiderlyButtonComponent], template: "<ng-container *transloco=\"let t\">\n  <div *ngIf=\"externalProviders.length > 0\">\n    <div\n      style=\"display: flex; align-items: center; gap: 7px; justify-content: center; margin-bottom: 16px;\"\n    >\n      <div class=\"separator\"></div>\n      <div>{{ t(\"or\") }}</div>\n      <div class=\"separator\"></div>\n    </div>\n    <div style=\"display: flex; flex-direction: column; gap: 10px\">\n      <spiderly-button\n        *ngFor=\"let provider of externalProviders\"\n        (onClick)=\"loginWithExternalProvider(provider.code)\"\n        [label]=\"provider.label || (provider.code | titlecase)\"\n        [iconUrl]=\"iconFor(provider.code)\"\n        [outlined]=\"true\"\n        styleClass=\"w-full\"\n      ></spiderly-button>\n    </div>\n  </div>\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: ConfigServiceBase }, { type: AuthServiceBase }, { type: ApiSecurityService }], propDecorators: { providerIcons: [{
+                type: Input
+            }] } });
+
+class UserBase extends BaseEntity {
+    static { this.typeName = 'UserBase'; }
+    constructor({ id, email, } = {}) {
+        super();
+        this.id = id;
+        this.email = email;
+    }
+    static { this.schema = {
+        id: {
+            type: 'number',
+        },
+        email: {
+            type: 'string',
+        },
+    }; }
+}
+class AuthResult extends BaseEntity {
+    static { this.typeName = 'AuthResult'; }
+    constructor({ userId, email, accessToken, refreshToken, } = {}) {
+        super();
+        this.userId = userId;
+        this.email = email;
+        this.accessToken = accessToken;
+        this.refreshToken = refreshToken;
+    }
+    static { this.schema = {
+        userId: {
+            type: 'number',
+        },
+        email: {
+            type: 'string',
+        },
+        accessToken: {
+            type: 'string',
+        },
+        refreshToken: {
+            type: 'string',
+        },
+    }; }
+}
+class VerificationTokenRequest extends BaseEntity {
+    static { this.typeName = 'VerificationTokenRequest'; }
+    constructor({ verificationCode, browserId, email, } = {}) {
+        super();
+        this.verificationCode = verificationCode;
+        this.browserId = browserId;
+        this.email = email;
+    }
+    static { this.schema = {
+        verificationCode: {
+            type: 'string',
+        },
+        browserId: {
+            type: 'string',
+        },
+        email: {
+            type: 'string',
+        },
+    }; }
+}
+class ExternalProvider extends BaseEntity {
+    static { this.typeName = 'ExternalProvider'; }
+    constructor({ provider, idToken, browserId, } = {}) {
+        super();
+        this.provider = provider;
+        this.idToken = idToken;
+        this.browserId = browserId;
+    }
+    static { this.schema = {
+        provider: {
+            type: 'string',
+        },
+        idToken: {
+            type: 'string',
+        },
+        browserId: {
+            type: 'string',
+        },
+    }; }
+}
+class ExternalProviderPublic extends BaseEntity {
+    static { this.typeName = 'ExternalProviderPublic'; }
+    constructor({ code, authority, clientId, label, } = {}) {
+        super();
+        this.code = code;
+        this.authority = authority;
+        this.clientId = clientId;
+        this.label = label;
+    }
+    static { this.schema = {
+        code: {
+            type: 'string',
+        },
+        authority: {
+            type: 'string',
+        },
+        clientId: {
+            type: 'string',
+        },
+        label: {
+            type: 'string',
+        },
+    }; }
+}
+class UserRole extends BaseEntity {
+    static { this.typeName = 'UserRole'; }
+    constructor({ roleId, userId, } = {}) {
+        super();
+        this.roleId = roleId;
+        this.userId = userId;
+    }
+    static { this.schema = {
+        roleId: {
+            type: 'number',
+        },
+        userId: {
+            type: 'number',
         },
     }; }
 }
@@ -2049,501 +2559,142 @@ class BaseFormComponent {
             if (!this.saveBodyClass)
                 throw new SpiderlyError('You did not initialize saveBodyClass');
             if (!this.mainUIFormClass)
-                throw new SpiderlyError('You did not initialize mainUIFormClass');
-            let saveBody = this.parentFormGroup.getRawValue();
-            this.onBeforeSave(saveBody);
-            const isValid = this.baseFormService.isControlValid(this.parentFormGroup);
-            if (isValid) {
-                this.parentFormGroup
-                    .saveObservableMethod(saveBody)
-                    .subscribe((res) => {
-                    this.messageService.successMessage(this.successfulSaveToastDescription);
-                    if (rerouteToParentSlugAfterSave) {
-                        this.rerouteToSavedObject(undefined);
-                    }
-                    else {
-                        saveBody = this.baseFormService.mapMainUIFormToSaveBody(this.mainUIFormClass, res);
-                        this.baseFormService.initFormGroup(this.parentFormGroup, this.saveBodyClass, saveBody);
-                        const saveBodyMainDTOKey = this.baseFormService.getSaveBodyMainDTOKey(this.saveBodyClass);
-                        const savedObjectId = saveBody[saveBodyMainDTOKey]?.id;
-                        this.rerouteToSavedObject(savedObjectId); // You always need to have id, because of id == 0 and version change
-                    }
-                    this.onAfterSave();
-                });
-                this.onAfterSaveRequest();
-            }
-            else {
-                this.baseFormService.showInvalidFieldsMessage();
-            }
-        };
-        /**
-         * Hook that runs **before** form validation and the save request.
-         * Use this to modify the save body or perform any pre-save logic (e.g., transforming data, setting computed fields).
-         *
-         * @param saveBody - The current save body built from the form's raw value. Mutate it directly to change what gets sent to the server.
-         *
-         * @example
-         * ```ts
-         * onBeforeSave = (saveBody?: ProductSaveBody) => {
-         *   saveBody.productDTO.fullName = saveBody.productDTO.firstName + ' ' + saveBody.productDTO.lastName;
-         * };
-         * ```
-         */
-        this.onBeforeSave = (saveBody) => { };
-        /**
-         * Hook that runs **after** a successful save response is received.
-         * Use this for post-save side effects (e.g., refreshing related data, showing additional notifications).
-         *
-         * @example
-         * ```ts
-         * onAfterSave = () => {
-         *   this.loadRelatedProducts();
-         * };
-         * ```
-         */
-        this.onAfterSave = () => { };
-        /**
-         * Hook that runs immediately **after** the save HTTP request is sent, but **before** the response arrives.
-         * Use this for side effects that should happen as soon as the request is dispatched (e.g., disabling UI elements, starting a loading indicator).
-         *
-         * @example
-         * ```ts
-         * onAfterSaveRequest = () => {
-         *   this.isSaving = true;
-         * };
-         * ```
-         */
-        this.onAfterSaveRequest = () => { };
-    }
-    ngOnInit() { }
-    /**
-     * Handles navigation after a successful save.
-     * Override this to customize the post-save navigation behavior.
-     * By default, navigates to the parent URL when `rerouteId` is not provided, or to the saved object's URL otherwise.
-     *
-     * @param rerouteId - The ID of the saved object, used to build the target URL. When not provided, navigates to the parent URL.
-     *
-     * @example
-     * ```ts
-     * // Override to navigate to a custom route after save
-     * override rerouteToSavedObject(rerouteId: number | string): void {
-     *   this.router.navigateByUrl(`/products/${rerouteId}/details`);
-     * }
-     * ```
-     */
-    rerouteToSavedObject(rerouteId) {
-        if (rerouteId == null) {
-            const currentUrl = this.router.url;
-            const parentUrl = getParentUrl(currentUrl);
-            this.router.navigateByUrl(parentUrl);
-            return;
-        }
-        const segments = this.router.url.split('/');
-        segments[segments.length - 1] = rerouteId.toString();
-        const newUrl = segments.join('/');
-        this.router.navigateByUrl(newUrl);
-    }
-    //#endregion
-    //#region Model List
-    getFormArrayControlByIndex(formControlName, formArray, index, filter) {
-        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
-        //   formArray.controlNamesFromHtml.push(formControlName);
-        let filteredFormGroups;
-        if (filter) {
-            filteredFormGroups = filter(formArray.controls);
-        }
-        else {
-            return formArray.controls[index].controls[formControlName];
-        }
-        return filteredFormGroups[index]?.controls[formControlName]; // FT: Don't change this. It's always possible that change detection occurs before something.
-    }
-    getFormArrayControls(formControlName, formArray, filter) {
-        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
-        //   formArray.controlNamesFromHtml.push(formControlName);
-        let filteredFormGroups;
-        if (filter) {
-            filteredFormGroups = filter(formArray.controls);
-        }
-        else {
-            return formArray.controls.map((x) => x.controls[formControlName]);
-        }
-        return filteredFormGroups.map((x) => x.controls[formControlName]);
-    }
-    removeFormControlsFromTheFormArray(formArray, indexes) {
-        // Sort indexes in descending order to avoid index shifts when removing controls
-        const sortedIndexes = indexes.sort((a, b) => b - a);
-        sortedIndexes.forEach((index) => {
-            if (index >= 0 && index < formArray.length) {
-                formArray.removeAt(index);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$2.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: BaseFormComponent, isStandalone: false, selector: "base-form", ngImport: i0, template: '', isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'base-form', template: '', standalone: false }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$2.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }] });
-
-class GoogleButtonComponent {
-    constructor() {
-        this.loginWithGoogle = new EventEmitter();
-    }
-    handleGoogleLogin() {
-        this.loginWithGoogle.emit(createFakeGoogleWrapper());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: GoogleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: GoogleButtonComponent, isStandalone: true, selector: "google-button", inputs: { label: "label" }, outputs: { loginWithGoogle: "loginWithGoogle" }, ngImport: i0, template: "<ng-container>\n  <spiderly-button\n    (onClick)=\"handleGoogleLogin()\"\n    [label]=\"label\"\n    [outlined]=\"true\"\n    [style]=\"{ width: '100%' }\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"0.98em\"\n      height=\"1em\"\n      viewBox=\"0 0 256 262\"\n    >\n      <path\n        fill=\"#4285f4\"\n        d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n      />\n      <path\n        fill=\"#34a853\"\n        d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n      />\n      <path\n        fill=\"#fbbc05\"\n        d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n      />\n      <path\n        fill=\"#eb4335\"\n        d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n      />\n    </svg>\n  </spiderly-button>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: GoogleButtonComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'google-button', imports: [ButtonModule, SpiderlyButtonComponent], template: "<ng-container>\n  <spiderly-button\n    (onClick)=\"handleGoogleLogin()\"\n    [label]=\"label\"\n    [outlined]=\"true\"\n    [style]=\"{ width: '100%' }\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"0.98em\"\n      height=\"1em\"\n      viewBox=\"0 0 256 262\"\n    >\n      <path\n        fill=\"#4285f4\"\n        d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622l38.755 30.023l2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\n      />\n      <path\n        fill=\"#34a853\"\n        d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055c-34.523 0-63.824-22.773-74.269-54.25l-1.531.13l-40.298 31.187l-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\n      />\n      <path\n        fill=\"#fbbc05\"\n        d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82c0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602z\"\n      />\n      <path\n        fill=\"#eb4335\"\n        d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0C79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\n      />\n    </svg>\n  </spiderly-button>\n</ng-container>\n" }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], loginWithGoogle: [{
-                type: Output
-            }] } });
-
-class ConfigServiceBase {
-    constructor() {
-        this.production = false;
-        this.frontendUrl = 'http://localhost:4200';
-        this.showGoogleAuth = false;
-        this.companyName = 'Company Name';
-        this.primaryColor = '#111b2c';
-        /* URLs */
-        this.loginSlug = 'login';
-        /* Local storage */
-        this.accessTokenKey = 'access_token';
-        this.refreshTokenKey = 'refresh_token';
-        this.browserIdKey = 'browser_id';
-        this.httpOptions = {};
-        this.httpSkipSpinnerOptions = {
-            headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
-            params: new HttpParams().set('X-Skip-Spinner', 'true'),
-        };
-        this.logoPath = 'assets/images/logo/logo.svg';
-        /* Pagination */
-        this.defaultPageSize = 10;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ConfigServiceBase, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [] });
-
-class InitCompanyAuthDialogDetails extends BaseEntity {
-    constructor({ image, companyName, } = {}) {
-        super();
-        this.image = image;
-        this.companyName = companyName;
-    }
-    static { this.typeName = 'InitCompanyAuthDialogDetails'; }
-}
-
-class ApiSecurityService {
-    constructor(http, config) {
-        this.http = http;
-        this.config = config;
-        //#region Authentication
-        this.login = (request) => {
-            return this.http.post(`${this.config.apiUrl}/Security/Login`, request, this.config.httpOptions);
-        };
-        this.loginExternal = (externalProviderDTO) => {
-            return this.http.post(`${this.config.apiUrl}/Security/LoginExternal`, externalProviderDTO, this.config.httpOptions);
-        };
-        this.sendLoginVerificationEmail = (loginDTO) => {
-            return this.http.post(`${this.config.apiUrl}/Security/SendLoginVerificationEmail`, loginDTO, this.config.httpOptions);
-        };
-        this.loginWithCookies = (request) => {
-            return this.http.post(`${this.config.apiUrl}/Security/LoginWithCookies`, request, this.config.httpOptions);
-        };
-        this.loginExternalWithCookies = (externalProviderDTO) => {
-            return this.http.post(`${this.config.apiUrl}/Security/LoginExternalWithCookies`, externalProviderDTO, this.config.httpOptions);
-        };
-        this.logout = (browserId) => {
-            return this.http.get(`${this.config.apiUrl}/Security/Logout?browserId=${browserId}`);
-        };
-        this.logoutWithCookies = (browserId) => {
-            return this.http.get(`${this.config.apiUrl}/Security/LogoutWithCookies?browserId=${browserId}`);
-        };
-        this.refreshTokenWithHeaders = (request) => {
-            return this.http.post(`${this.config.apiUrl}/Security/RefreshTokenWithHeaders`, request, this.config.httpOptions);
-        };
-        this.refreshTokenWithCookies = (browserId) => {
-            return this.http.get(`${this.config.apiUrl}/Security/RefreshTokenWithCookies?browserId=${browserId}`);
-        };
-        //#endregion
-        //#region User
-        this.getCurrentUserBase = () => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserBase`, this.config.httpSkipSpinnerOptions);
-        };
-        this.getCurrentUserPermissionCodes = () => {
-            return this.http.get(`${this.config.apiUrl}/Security/GetCurrentUserPermissionCodes`, this.config.httpSkipSpinnerOptions);
-        };
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, deps: [{ token: i1$2.HttpClient }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: ApiSecurityService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: ConfigServiceBase }] });
-
-class AuthServiceBase {
-    constructor(router, http, externalAuthService, apiService, config, platformId) {
-        this.router = router;
-        this.http = http;
-        this.externalAuthService = externalAuthService;
-        this.apiService = apiService;
-        this.config = config;
-        this.platformId = platformId;
-        this.apiUrl = this.config.apiUrl;
-        this._currentUserPermissionCodes = new BehaviorSubject(undefined);
-        this.currentUserPermissionCodes$ = this._currentUserPermissionCodes.asObservable();
-        this._user = new BehaviorSubject(undefined);
-        this.user$ = this._user.asObservable();
-        // Google auth
-        this.authChangeSub = new Subject();
-        this.extAuthChangeSub = new Subject();
-        this.authChanged = this.authChangeSub.asObservable();
-        this.extAuthChanged = this.extAuthChangeSub.asObservable();
-        this.storageEventListener = (event) => {
-            if (event.storageArea === localStorage) {
-                if (event.key === 'logout-event') {
-                    this.stopTokenTimer();
-                    this._user.next(null);
-                    this._currentUserPermissionCodes.next(null);
-                }
-                if (event.key === 'login-event') {
-                    this.stopTokenTimer();
-                    this.apiService.getCurrentUserBase().subscribe((user) => {
-                        this._user.next({
-                            id: user.id,
-                            email: user.email,
-                        });
-                        this.setCurrentUserPermissionCodes().subscribe();
-                    });
-                }
+                throw new SpiderlyError('You did not initialize mainUIFormClass');
+            let saveBody = this.parentFormGroup.getRawValue();
+            this.onBeforeSave(saveBody);
+            const isValid = this.baseFormService.isControlValid(this.parentFormGroup);
+            if (isValid) {
+                this.parentFormGroup
+                    .saveObservableMethod(saveBody)
+                    .subscribe((res) => {
+                    this.messageService.successMessage(this.successfulSaveToastDescription);
+                    if (rerouteToParentSlugAfterSave) {
+                        this.rerouteToSavedObject(undefined);
+                    }
+                    else {
+                        saveBody = this.baseFormService.mapMainUIFormToSaveBody(this.mainUIFormClass, res);
+                        this.baseFormService.initFormGroup(this.parentFormGroup, this.saveBodyClass, saveBody);
+                        const saveBodyMainDTOKey = this.baseFormService.getSaveBodyMainDTOKey(this.saveBodyClass);
+                        const savedObjectId = saveBody[saveBodyMainDTOKey]?.id;
+                        this.rerouteToSavedObject(savedObjectId); // You always need to have id, because of id == 0 and version change
+                    }
+                    this.onAfterSave();
+                });
+                this.onAfterSaveRequest();
+            }
+            else {
+                this.baseFormService.showInvalidFieldsMessage();
             }
         };
-        this.onAfterLoginExternal = () => {
-            this.navigateToDashboard();
-        };
-        this.onAfterLogout = () => {
-            this._currentUserPermissionCodes.next(null);
-            this.router.navigate([this.config.loginSlug]);
-        };
-        this.onAfterRefreshToken = () => {
-            this.setCurrentUserPermissionCodes().subscribe(); // FT: Needs to be after setting local storage
-        };
-        this.initCompanyAuthDialogDetails = () => {
-            return of(new InitCompanyAuthDialogDetails({
-                image: this.config.logoPath,
-                companyName: this.config.companyName,
-            }));
-        };
-        this.onAfterNgOnDestroy = () => { };
-        if (isPlatformBrowser(platformId)) {
-            window.addEventListener('storage', this.storageEventListener);
-        }
-        // Google auth
-        this.externalAuthService.authState.subscribe((user) => {
-            const externalAuth = {
-                // provider: user.provider,
-                idToken: user.idToken,
-            };
-            this.loginExternal(externalAuth).subscribe((authResult) => {
-                this.onAfterLoginExternal();
-            });
-            this.extAuthChangeSub.next(user);
-        });
-    }
-    sendLoginVerificationEmail(body) {
-        const browserId = this.getBrowserId();
-        body.browserId = browserId;
-        return this.apiService.sendLoginVerificationEmail(body);
-    }
-    login(body) {
-        const browserId = this.getBrowserId();
-        body.browserId = browserId;
-        const loginResultObservable = this.http.post(`${this.apiUrl}/Security/Login`, body);
-        return this.handleLoginResult(loginResultObservable);
-    }
-    loginExternal(body) {
-        const browserId = this.getBrowserId();
-        body.browserId = browserId;
-        const loginResultObservable = this.http.post(`${this.apiUrl}/Security/LoginExternal`, body);
-        return this.handleLoginResult(loginResultObservable);
-    }
-    handleLoginResult(loginResultObservable) {
-        return loginResultObservable.pipe(map$1(async (loginResult) => {
-            this.setLocalStorage(loginResult);
-            this._user.next({
-                id: loginResult.userId,
-                email: loginResult.email,
-            });
-            this.startTokenTimer();
-            this.setCurrentUserPermissionCodes().subscribe();
-            return loginResult;
-        }));
-    }
-    logout() {
-        const browserId = this.getBrowserId();
-        this.http
-            .get(`${this.apiUrl}/Security/Logout?browserId=${browserId}`)
-            .pipe(finalize(() => {
-            this.clearLocalStorage();
-            this._user.next(null);
-            this.onAfterLogout();
-            this.stopTokenTimer();
-        }))
-            .subscribe();
+        /**
+         * Hook that runs **before** form validation and the save request.
+         * Use this to modify the save body or perform any pre-save logic (e.g., transforming data, setting computed fields).
+         *
+         * @param saveBody - The current save body built from the form's raw value. Mutate it directly to change what gets sent to the server.
+         *
+         * @example
+         * ```ts
+         * onBeforeSave = (saveBody?: ProductSaveBody) => {
+         *   saveBody.productDTO.fullName = saveBody.productDTO.firstName + ' ' + saveBody.productDTO.lastName;
+         * };
+         * ```
+         */
+        this.onBeforeSave = (saveBody) => { };
+        /**
+         * Hook that runs **after** a successful save response is received.
+         * Use this for post-save side effects (e.g., refreshing related data, showing additional notifications).
+         *
+         * @example
+         * ```ts
+         * onAfterSave = () => {
+         *   this.loadRelatedProducts();
+         * };
+         * ```
+         */
+        this.onAfterSave = () => { };
+        /**
+         * Hook that runs immediately **after** the save HTTP request is sent, but **before** the response arrives.
+         * Use this for side effects that should happen as soon as the request is dispatched (e.g., disabling UI elements, starting a loading indicator).
+         *
+         * @example
+         * ```ts
+         * onAfterSaveRequest = () => {
+         *   this.isSaving = true;
+         * };
+         * ```
+         */
+        this.onAfterSaveRequest = () => { };
     }
-    refreshToken() {
-        const refreshToken = localStorage.getItem(this.config.refreshTokenKey);
-        if (!refreshToken) {
-            this.clearLocalStorage();
-            return of(null);
+    ngOnInit() { }
+    /**
+     * Handles navigation after a successful save.
+     * Override this to customize the post-save navigation behavior.
+     * By default, navigates to the parent URL when `rerouteId` is not provided, or to the saved object's URL otherwise.
+     *
+     * @param rerouteId - The ID of the saved object, used to build the target URL. When not provided, navigates to the parent URL.
+     *
+     * @example
+     * ```ts
+     * // Override to navigate to a custom route after save
+     * override rerouteToSavedObject(rerouteId: number | string): void {
+     *   this.router.navigateByUrl(`/products/${rerouteId}/details`);
+     * }
+     * ```
+     */
+    rerouteToSavedObject(rerouteId) {
+        if (rerouteId == null) {
+            const currentUrl = this.router.url;
+            const parentUrl = getParentUrl(currentUrl);
+            this.router.navigateByUrl(parentUrl);
+            return;
         }
-        const browserId = this.getBrowserId();
-        const body = new RefreshTokenRequest();
-        body.browserId = browserId;
-        body.refreshToken = refreshToken;
-        return this.http
-            .post(`${this.apiUrl}/Security/RefreshTokenWithHeaders`, body, this.config.httpSkipSpinnerOptions)
-            .pipe(map$1((loginResult) => {
-            this._user.next({
-                id: loginResult.userId,
-                email: loginResult.email,
-            });
-            this.setLocalStorage(loginResult);
-            this.startTokenTimer();
-            this.onAfterRefreshToken();
-            return loginResult;
-        }));
-    }
-    setLocalStorage(loginResult) {
-        localStorage.setItem(this.config.accessTokenKey, loginResult.accessToken);
-        localStorage.setItem(this.config.refreshTokenKey, loginResult.refreshToken);
-        localStorage.setItem('login-event', 'login' + Math.random());
-    }
-    clearLocalStorage() {
-        localStorage.removeItem(this.config.accessTokenKey);
-        localStorage.removeItem(this.config.refreshTokenKey);
-        localStorage.setItem('logout-event', 'logout' + Math.random());
+        const segments = this.router.url.split('/');
+        segments[segments.length - 1] = rerouteId.toString();
+        const newUrl = segments.join('/');
+        this.router.navigateByUrl(newUrl);
     }
-    getBrowserId() {
-        let browserId = localStorage.getItem(this.config.browserIdKey); // FT: We don't need to remove this from the local storage ever, only if the user manuely deletes it, we will handle it
-        if (!browserId) {
-            browserId = crypto.randomUUID();
-            localStorage.setItem(this.config.browserIdKey, browserId);
+    //#endregion
+    //#region Model List
+    getFormArrayControlByIndex(formControlName, formArray, index, filter) {
+        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
+        //   formArray.controlNamesFromHtml.push(formControlName);
+        let filteredFormGroups;
+        if (filter) {
+            filteredFormGroups = filter(formArray.controls);
         }
-        return browserId;
-    }
-    isAccessTokenExpired() {
-        const expired = this.getTokenRemainingTime() < 5000;
-        return expired;
-    }
-    getTokenRemainingTime() {
-        const accessToken = this.getAccessToken();
-        if (!accessToken) {
-            return 0;
+        else {
+            return formArray.controls[index].controls[formControlName];
         }
-        const jwtToken = JSON.parse(atob(accessToken.split('.')[1]));
-        const expires = new Date(jwtToken.exp * 1000);
-        return expires.getTime() - Date.now();
+        return filteredFormGroups[index]?.controls[formControlName]; // FT: Don't change this. It's always possible that change detection occurs before something.
     }
-    getAccessToken() {
-        if (isPlatformBrowser(this.platformId)) {
-            return localStorage.getItem(this.config.accessTokenKey);
+    getFormArrayControls(formControlName, formArray, filter) {
+        // if(formArray.controlNamesFromHtml.findIndex(x => x === formControlName) === -1)
+        //   formArray.controlNamesFromHtml.push(formControlName);
+        let filteredFormGroups;
+        if (filter) {
+            filteredFormGroups = filter(formArray.controls);
         }
-        return null;
-    }
-    startTokenTimer() {
-        const timeout = this.getTokenRemainingTime();
-        this.timer = of(true)
-            .pipe(delay(timeout), tap({
-            next: () => this.refreshToken().subscribe(),
-        }))
-            .subscribe();
-    }
-    stopTokenTimer() {
-        this.timer?.unsubscribe();
-    }
-    navigateToDashboard() {
-        this.router.navigate(['/']);
-    }
-    setCurrentUserPermissionCodes() {
-        return this.apiService.getCurrentUserPermissionCodes().pipe(map$1((permissionCodes) => {
-            this._currentUserPermissionCodes.next(permissionCodes);
-            return permissionCodes;
-        }));
-    }
-    ngOnDestroy() {
-        if (isPlatformBrowser(this.platformId)) {
-            window.removeEventListener('storage', this.storageEventListener);
+        else {
+            return formArray.controls.map((x) => x.controls[formControlName]);
         }
-        this.onAfterNgOnDestroy();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, deps: [{ token: i3$2.Router }, { token: i1$2.HttpClient }, { token: i3$3.SocialAuthService }, { token: ApiSecurityService }, { token: ConfigServiceBase }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthServiceBase, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i3$2.Router }, { type: i1$2.HttpClient }, { type: i3$3.SocialAuthService }, { type: ApiSecurityService }, { type: ConfigServiceBase }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }] });
-
-class AuthComponent {
-    constructor(config, authService) {
-        this.config = config;
-        this.authService = authService;
-        this.initCompanyAuthDialogDetailsSubscription = null;
-        this.onCompanyNameChange = new EventEmitter();
-    }
-    ngOnInit() {
-        this.initCompanyDetails();
+        return filteredFormGroups.map((x) => x.controls[formControlName]);
     }
-    initCompanyDetails() {
-        this.initCompanyAuthDialogDetailsSubscription = this.authService
-            .initCompanyAuthDialogDetails()
-            .subscribe((initCompanyAuthDialogDetails) => {
-            if (initCompanyAuthDialogDetails != null) {
-                this.image = initCompanyAuthDialogDetails.image;
-                this.companyName = initCompanyAuthDialogDetails.companyName;
-                this.onCompanyNameChange.next(this.companyName);
+    removeFormControlsFromTheFormArray(formArray, indexes) {
+        // Sort indexes in descending order to avoid index shifts when removing controls
+        const sortedIndexes = indexes.sort((a, b) => b - a);
+        sortedIndexes.forEach((index) => {
+            if (index >= 0 && index < formArray.length) {
+                formArray.removeAt(index);
             }
         });
     }
-    onGoogleSignIn(googleWrapper) {
-        googleWrapper.click();
-    }
-    ngOnDestroy() {
-        if (this.initCompanyAuthDialogDetailsSubscription) {
-            this.initCompanyAuthDialogDetailsSubscription.unsubscribe();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, deps: [{ token: ConfigServiceBase }, { token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: AuthComponent, isStandalone: true, selector: "auth", outputs: { onCompanyNameChange: "onCompanyNameChange" }, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex min-h-screen overflow-hidden p-5\">\n    <div class=\"flex flex-col w-full\">\n      <div\n        class=\"w-full sm:w-120\"\n        style=\"\n          margin: auto;\n          border-radius: 50px;\n          padding: 0.3rem;\n          background: linear-gradient(\n            180deg,\n            var(--p-primary-color) 10%,\n            rgba(33, 150, 243, 0) 30%\n          );\n        \"\n      >\n        <div\n          class=\"surface-card py-12 px-8 sm:px-12\"\n          style=\"border-radius: 45px\"\n        >\n          <div class=\"flex justify-center\" style=\"margin-bottom: 38px\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              class=\"max-h-15\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </div>\n\n          <ng-content></ng-content>\n\n          <div *ngIf=\"config.showGoogleAuth\">\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 7px;\n                justify-content: center;\n                margin-bottom: 16px;\n              \"\n            >\n              <div class=\"separator\"></div>\n              <div>{{ t(\"or\") }}</div>\n              <div class=\"separator\"></div>\n            </div>\n            <div>\n              <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n              <google-button\n                (loginWithGoogle)=\"onGoogleSignIn($event)\"\n                [label]=\"t('ContinueWithGoogle')\"\n              ></google-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GoogleButtonComponent, selector: "google-button", inputs: ["label"], outputs: ["loginWithGoogle"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$2.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.13", type: BaseFormComponent, isStandalone: false, selector: "base-form", ngImport: i0, template: '', isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: BaseFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth', imports: [CommonModule, GoogleButtonComponent, TranslocoDirective], template: "<ng-container *transloco=\"let t\">\n  <div class=\"flex min-h-screen overflow-hidden p-5\">\n    <div class=\"flex flex-col w-full\">\n      <div\n        class=\"w-full sm:w-120\"\n        style=\"\n          margin: auto;\n          border-radius: 50px;\n          padding: 0.3rem;\n          background: linear-gradient(\n            180deg,\n            var(--p-primary-color) 10%,\n            rgba(33, 150, 243, 0) 30%\n          );\n        \"\n      >\n        <div\n          class=\"surface-card py-12 px-8 sm:px-12\"\n          style=\"border-radius: 45px\"\n        >\n          <div class=\"flex justify-center\" style=\"margin-bottom: 38px\">\n            <img\n              *ngIf=\"image != null\"\n              [src]=\"image\"\n              alt=\"{{ companyName }} Logo\"\n              title=\"{{ companyName }} Logo\"\n              class=\"max-h-15\"\n            />\n            <i\n              *ngIf=\"image == null\"\n              class=\"pi pi-spin pi-spinner primary-color\"\n              style=\"font-size: 2rem\"\n            ></i>\n          </div>\n\n          <ng-content></ng-content>\n\n          <div *ngIf=\"config.showGoogleAuth\">\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                gap: 7px;\n                justify-content: center;\n                margin-bottom: 16px;\n              \"\n            >\n              <div class=\"separator\"></div>\n              <div>{{ t(\"or\") }}</div>\n              <div class=\"separator\"></div>\n            </div>\n            <div>\n              <!-- https://code-maze.com/how-to-sign-in-with-google-angular-aspnet-webapi/ -->\n              <google-button\n                (loginWithGoogle)=\"onGoogleSignIn($event)\"\n                [label]=\"t('ContinueWithGoogle')\"\n              ></google-button>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: ConfigServiceBase }, { type: AuthServiceBase }], propDecorators: { onCompanyNameChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'base-form', template: '', standalone: false }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$2.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }] });
 
 class PanelBodyComponent {
     constructor() {
@@ -2574,6 +2725,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
 class PanelHeaderComponent {
     constructor(translocoService) {
         this.translocoService = translocoService;
+        /** Whether the header icon is shown. Defaults to `true`. */
         this.showIcon = true;
     }
     ngOnInit() {
@@ -2624,8 +2776,11 @@ class SpiderlyPanelComponent {
         this.toggleable = false;
         this.toggler = 'icon';
         this.collapsed = false;
+        /** Whether the CRUD context-menu icon is shown. Defaults to `true`. */
         this.showCrudMenu = true;
+        /** Whether a remove/delete icon is shown. Defaults to `false`. */
         this.showRemoveIcon = false;
+        /** Whether the panel header is rendered. Defaults to `true`. */
         this.showPanelHeader = true;
         this.onMenuIconClick = new EventEmitter();
         this.onRemoveIconClick = new EventEmitter();
@@ -2793,8 +2948,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
                 type: Input
             }] } });
 
-class LoginComponent extends BaseFormComponent {
-    constructor(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService, authService, config) {
+class SpiderlyLoginComponent extends BaseFormComponent {
+    constructor(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService, authService) {
         super(differs, http, messageService, changeDetectorRef, router, route, translocoService, baseFormService);
         this.differs = differs;
         this.http = http;
@@ -2805,21 +2960,31 @@ class LoginComponent extends BaseFormComponent {
         this.translocoService = translocoService;
         this.baseFormService = baseFormService;
         this.authService = authService;
-        this.config = config;
         this.loginFormGroup = new SpiderlyFormGroup({});
         this.showEmailSentDialog = false;
+        /** Per-code provider icon overrides, forwarded to <spiderly-external-login>. */
+        this.providerIcons = {};
     }
     ngOnInit() {
         this.initLoginFormGroup(new Login({}));
+        this.showExternalAuthErrorIfPresent();
+    }
+    // Surface a friendly message when the server-side external login bounced back with an error (captured from
+    // the URL at bootstrap by AuthServiceBase). "expired" = the user lingered on the provider's account picker.
+    showExternalAuthErrorIfPresent() {
+        const code = this.authService.externalAuthErrorCode;
+        if (!code) {
+            return;
+        }
+        this.authService.externalAuthErrorCode = null; // show once
+        const messageKey = code === 'expired' ? 'ExternalLoginExpiredDetails' : 'ExternalLoginFailedDetails';
+        this.messageService.warningMessage(this.translocoService.translate(messageKey));
     }
     initLoginFormGroup(model) {
         this.baseFormService.initFormGroup(this.loginFormGroup, Login, model, [
             'email',
         ]);
     }
-    companyNameChange(companyName) {
-        this.companyName = companyName;
-    }
     sendLoginVerificationEmail() {
         let isFormGroupValid = this.baseFormService.isControlValid(this.loginFormGroup);
         if (isFormGroupValid == false) {
@@ -2835,20 +3000,23 @@ class LoginComponent extends BaseFormComponent {
             this.showEmailSentDialog = true;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$2.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }, { token: AuthServiceBase }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: LoginComponent, isStandalone: true, selector: "app-login", usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (loginFormGroup != null) {\n    @if (showEmailSentDialog == false) {\n      <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n        <!-- We are not loading anything from the server here so we don't need defer block -->\n        <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px\">\n          <div>\n            <spiderly-textbox\n              [control]=\"loginFormGroup.getControl('email')\"\n            ></spiderly-textbox>\n          </div>\n\n          <div class=\"mt-4 mb-6\">\n            <div class=\"text-center\" style=\"font-size: smaller\">\n              {{ t(\"AgreementsOnRegister\") }}\n              <b\n                routerLink=\"/user-agreement\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"UserAgreement\") }}</b\n              >\n              {{ t(\"and\") }}\n              <b\n                routerLink=\"/privacy-policy\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"PrivacyPolicy\") }}</b\n              >.\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column; gap: 16px\">\n            <spiderly-button\n              [label]=\"t('Login')\"\n              (onClick)=\"sendLoginVerificationEmail()\"\n              [outlined]=\"true\"\n              [style]=\"{ width: '100%' }\"\n              type=\"submit\"\n            ></spiderly-button>\n          </div>\n        </form>\n      </auth>\n    } @else {\n      <login-verification\n        [email]=\"loginFormGroup.controls.email.getRawValue()\"\n      ></login-verification>\n    }\n  } @else {\n    <!-- TODO: Add skeleton -->\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthComponent, selector: "auth", outputs: ["onCompanyNameChange"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLoginComponent, deps: [{ token: i0.KeyValueDiffers }, { token: i1$2.HttpClient }, { token: SpiderlyMessageService }, { token: i0.ChangeDetectorRef }, { token: i3$2.Router }, { token: i3$2.ActivatedRoute }, { token: i1.TranslocoService }, { token: BaseFormService }, { token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.13", type: SpiderlyLoginComponent, isStandalone: true, selector: "spiderly-login", inputs: { providerIcons: "providerIcons" }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\n  @if (loginFormGroup != null) {\n    @if (showEmailSentDialog == false) {\n      <spiderly-auth-card>\n        <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px\">\n          <div>\n            <spiderly-textbox\n              [control]=\"loginFormGroup.getControl('email')\"\n            ></spiderly-textbox>\n          </div>\n\n          <div class=\"mt-4 mb-6\">\n            <div class=\"text-center\" style=\"font-size: smaller\">\n              {{ t(\"AgreementsOnRegister\") }}\n              <b\n                routerLink=\"/user-agreement\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"UserAgreement\") }}</b\n              >\n              {{ t(\"and\") }}\n              <b\n                routerLink=\"/privacy-policy\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"PrivacyPolicy\") }}</b\n              >.\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column; gap: 16px\">\n            <spiderly-button\n              [label]=\"t('Login')\"\n              (onClick)=\"sendLoginVerificationEmail()\"\n              [outlined]=\"true\"\n              [style]=\"{ width: '100%' }\"\n              type=\"submit\"\n            ></spiderly-button>\n          </div>\n        </form>\n\n        <spiderly-external-login\n          [providerIcons]=\"providerIcons\"\n        ></spiderly-external-login>\n      </spiderly-auth-card>\n    } @else {\n      <login-verification\n        [email]=\"loginFormGroup.controls.email.getRawValue()\"\n      ></login-verification>\n    }\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: AuthCardComponent, selector: "spiderly-auth-card" }, { kind: "component", type: ExternalLoginComponent, selector: "spiderly-external-login", inputs: ["providerIcons"] }, { kind: "ngmodule", type: SpiderlyControlsModule }, { kind: "component", type: SpiderlyTextboxComponent, selector: "spiderly-textbox", inputs: ["showButton", "buttonIcon"], outputs: ["onButtonClick"] }, { kind: "component", type: SpiderlyButtonComponent, selector: "spiderly-button", inputs: ["type"] }, { kind: "component", type: LoginVerificationComponent, selector: "login-verification", inputs: ["email", "userId"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: LoginComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: SpiderlyLoginComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-login', imports: [
+            args: [{ selector: 'spiderly-login', imports: [
                         CommonModule,
                         ReactiveFormsModule,
-                        AuthComponent,
+                        AuthCardComponent,
+                        ExternalLoginComponent,
                         SpiderlyControlsModule,
                         LoginVerificationComponent,
                         TranslocoDirective,
-                    ], template: "<ng-container *transloco=\"let t\">\n  @if (loginFormGroup != null) {\n    @if (showEmailSentDialog == false) {\n      <auth (onCompanyNameChange)=\"companyNameChange($event)\">\n        <!-- We are not loading anything from the server here so we don't need defer block -->\n        <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px\">\n          <div>\n            <spiderly-textbox\n              [control]=\"loginFormGroup.getControl('email')\"\n            ></spiderly-textbox>\n          </div>\n\n          <div class=\"mt-4 mb-6\">\n            <div class=\"text-center\" style=\"font-size: smaller\">\n              {{ t(\"AgreementsOnRegister\") }}\n              <b\n                routerLink=\"/user-agreement\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"UserAgreement\") }}</b\n              >\n              {{ t(\"and\") }}\n              <b\n                routerLink=\"/privacy-policy\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"PrivacyPolicy\") }}</b\n              >.\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column; gap: 16px\">\n            <spiderly-button\n              [label]=\"t('Login')\"\n              (onClick)=\"sendLoginVerificationEmail()\"\n              [outlined]=\"true\"\n              [style]=\"{ width: '100%' }\"\n              type=\"submit\"\n            ></spiderly-button>\n          </div>\n        </form>\n      </auth>\n    } @else {\n      <login-verification\n        [email]=\"loginFormGroup.controls.email.getRawValue()\"\n      ></login-verification>\n    }\n  } @else {\n    <!-- TODO: Add skeleton -->\n  }\n</ng-container>\n" }]
-        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$2.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }, { type: AuthServiceBase }, { type: ConfigServiceBase }] });
+                    ], template: "<ng-container *transloco=\"let t\">\n  @if (loginFormGroup != null) {\n    @if (showEmailSentDialog == false) {\n      <spiderly-auth-card>\n        <form [formGroup]=\"loginFormGroup\" style=\"margin-bottom: 16px\">\n          <div>\n            <spiderly-textbox\n              [control]=\"loginFormGroup.getControl('email')\"\n            ></spiderly-textbox>\n          </div>\n\n          <div class=\"mt-4 mb-6\">\n            <div class=\"text-center\" style=\"font-size: smaller\">\n              {{ t(\"AgreementsOnRegister\") }}\n              <b\n                routerLink=\"/user-agreement\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"UserAgreement\") }}</b\n              >\n              {{ t(\"and\") }}\n              <b\n                routerLink=\"/privacy-policy\"\n                class=\"primary-color cursor-pointer\"\n                >{{ t(\"PrivacyPolicy\") }}</b\n              >.\n            </div>\n          </div>\n\n          <div style=\"display: flex; flex-direction: column; gap: 16px\">\n            <spiderly-button\n              [label]=\"t('Login')\"\n              (onClick)=\"sendLoginVerificationEmail()\"\n              [outlined]=\"true\"\n              [style]=\"{ width: '100%' }\"\n              type=\"submit\"\n            ></spiderly-button>\n          </div>\n        </form>\n\n        <spiderly-external-login\n          [providerIcons]=\"providerIcons\"\n        ></spiderly-external-login>\n      </spiderly-auth-card>\n    } @else {\n      <login-verification\n        [email]=\"loginFormGroup.controls.email.getRawValue()\"\n      ></login-verification>\n    }\n  }\n</ng-container>\n" }]
+        }], ctorParameters: () => [{ type: i0.KeyValueDiffers }, { type: i1$2.HttpClient }, { type: SpiderlyMessageService }, { type: i0.ChangeDetectorRef }, { type: i3$2.Router }, { type: i3$2.ActivatedRoute }, { type: i1.TranslocoService }, { type: BaseFormService }, { type: AuthServiceBase }], propDecorators: { providerIcons: [{
+                type: Input
+            }] } });
 
 class CardSkeletonComponent {
     constructor() {
@@ -2893,6 +3061,7 @@ class IndexCardComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
         this.header = '';
+        /** Whether the CRUD context-menu icon is shown. Defaults to `true`. */
         this.showCrudMenu = true;
         this.onMenuIconClick = new EventEmitter();
         this.onRemoveIconClick = new EventEmitter();
@@ -2934,6 +3103,7 @@ class InfoCardComponent {
     constructor(formBuilder) {
         this.formBuilder = formBuilder;
         this.header = '';
+        /** Whether the small icon variant is shown. Defaults to `true`. */
         this.showSmallIcon = true;
         this.icon = 'pi pi-info-circle';
         this.textColor = '';
@@ -2976,22 +3146,16 @@ class LayoutServiceBase {
             inputStyle: 'outlined',
             menuMode: 'static',
             colorScheme: 'light',
-            theme: 'lara-light-indigo',
-            scale: 14,
-            color: `var(--p-primary-color)`,
         };
         this.state = {
             staticMenuDesktopInactive: false,
             overlayMenuActive: false,
             profileSidebarVisible: false,
             profileDropdownSidebarVisible: false,
-            configSidebarVisible: false,
             staticMenuMobileActive: false,
             menuHoverActive: false,
         };
-        this.configUpdate = new Subject();
         this.overlayOpen = new Subject();
-        this.configUpdate$ = this.configUpdate.asObservable();
         this.overlayOpen$ = this.overlayOpen.asObservable();
         //#region Top Bar
         this.initTopBarData = () => {
@@ -3042,9 +3206,6 @@ class LayoutServiceBase {
             this.overlayOpen.next(null);
         }
     }
-    showConfigSidebar() {
-        this.state.configSidebarVisible = true;
-    }
     isOverlay() {
         return this.layoutConfig.menuMode === 'overlay';
     }
@@ -3054,9 +3215,6 @@ class LayoutServiceBase {
     isMobile() {
         return !this.isDesktop();
     }
-    onConfigUpdate() {
-        this.configUpdate.next(this.layoutConfig);
-    }
     //#endregion
     ngOnDestroy() {
         if (this.userSubscription) {
@@ -3297,6 +3455,7 @@ class ProfileAvatarComponent {
         this.config = config;
         this.isSideMenuLayout = true;
         this.routeOnLargeProfileAvatarClick = true;
+        /** Whether the login button is shown when no user is signed in. Defaults to `true`. */
         this.showLoginButton = true;
         this.routeToLoginPage = true;
         this.loginButtonOutlined = false;
@@ -3719,7 +3878,9 @@ class SpiderlyDataTableComponent {
         this.locale = locale;
         this.destroy$ = new Subject();
         this.tableIcon = 'pi pi-list';
-        this.showPaginator = true; // Pass only when hasLazyLoad === false
+        /** Whether the paginator is shown. Pass only when `hasLazyLoad === false`. Defaults to `true`. */
+        this.showPaginator = true;
+        /** Whether the table is wrapped in a card container. Defaults to `false`. */
         this.showCardWrapper = false;
         this.readonly = false;
         this.idField = 'id';
@@ -3737,8 +3898,11 @@ class SpiderlyDataTableComponent {
         this.onIsAllSelectedChange = new EventEmitter();
         this.matchModeDateOptions = [];
         this.matchModeNumberOptions = [];
+        /** Whether the "Add" button is shown. Defaults to `true`. */
         this.showAddButton = true;
+        /** Whether the "Export to Excel" button is shown. Defaults to `true`. */
         this.showExportToExcelButton = true;
+        /** Whether the reload-table button is shown. Defaults to `false`. */
         this.showReloadTableButton = false;
         this.hasLazyLoad = true;
         /** 'session' persists across refresh only; 'local' persists indefinitely. */
@@ -4388,12 +4552,14 @@ class SpiderlyDataViewComponent {
         this.rows = 10;
         this.filters = [];
         this.onLazyLoad = new EventEmitter();
+        /** Whether the data view is wrapped in a card container. Defaults to `true`. */
         this.showCardWrapper = true;
         /**
          * Whether to display additional data on the right side of the paginator.
          * Defaults to `false`.
          */
         this.showPaginatorRightData = false;
+        /** Whether the total records count is shown. Defaults to `false`. */
         this.showTotalRecordsNumber = false;
         this.applyFiltersIcon = 'pi pi-filter';
         this.clearFiltersIcon = 'pi pi-filter-slash';
@@ -4762,18 +4928,13 @@ class AuthGuard {
         return this.checkAuth();
     }
     checkAuth() {
-        return this.authService.user$.pipe(map((user) => {
+        return this.authService.user$.pipe(filter$1((user) => user !== undefined), // wait until the session is resolved (undefined = still loading)
+        take(1), map((user) => {
             if (user) {
                 return true;
             }
-            else {
-                // const returnUrl = this.router.getCurrentNavigation()?.extractedUrl.toString() || '/';
-                // this.router.navigate(['login'], {
-                //    queryParams: { returnUrl },
-                // });
-                this.router.navigate([this.config.loginSlug]);
-                return false;
-            }
+            this.router.navigate([this.config.loginSlug]);
+            return false;
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: AuthGuard, deps: [{ token: AuthServiceBase }, { token: i3$2.Router }, { token: ConfigServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -4794,14 +4955,13 @@ class NotAuthGuard {
         return this.checkAuth();
     }
     checkAuth() {
-        return this.authService.user$.pipe(map((user) => {
+        return this.authService.user$.pipe(filter$1((user) => user !== undefined), // wait until the session is resolved (undefined = still loading)
+        take(1), map((user) => {
             if (user) {
                 this.authService.navigateToDashboard();
                 return false;
             }
-            else {
-                return true;
-            }
+            return true;
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.13", ngImport: i0, type: NotAuthGuard, deps: [{ token: AuthServiceBase }], target: i0.ɵɵFactoryTarget.Injectable }); }
@@ -4909,75 +5069,90 @@ const convertToDate = (object, parent, key) => {
     }
 };
 
+// Cookie-based auth: the session JWTs are HttpOnly cookies, so we just send credentials on API calls.
+// The browser attaches/refreshes the cookies; JS never holds the tokens (XSS-safe).
+//
+// CSRF: state-changing requests (POST/PUT/DELETE/PATCH) authenticated via cookie must include the
+// X-CSRF header, otherwise Spiderly.Shared/Attributes/AuthGuardAttribute.cs returns 403 Forbidden
+// (the server-side check was added in commit 92f238d but the matching client-side header was never
+// emitted, so every cookie-authed write was failing in the admin). The check is presence-only —
+// any non-empty value works — and the protection comes from the fact that a cross-origin form
+// submission cannot set custom request headers without a CORS preflight.
+const SAFE_HTTP_METHODS = new Set(['GET', 'HEAD', 'OPTIONS']);
 const jwtInterceptor = (req, next) => {
     const config = inject(ConfigServiceBase);
-    const platformId = inject(PLATFORM_ID);
-    let accessToken = null;
-    if (isPlatformBrowser(platformId)) {
-        accessToken = localStorage.getItem(config.accessTokenKey);
-    }
     const isApiUrl = req.url.startsWith(config.apiUrl);
-    if (accessToken && isApiUrl) {
+    if (isApiUrl) {
+        const isStateChanging = !SAFE_HTTP_METHODS.has(req.method.toUpperCase());
         req = req.clone({
-            setHeaders: { Authorization: `Bearer ${accessToken}` },
+            withCredentials: true,
+            ...(isStateChanging && { setHeaders: { 'X-CSRF': '1' } }),
         });
     }
     return next(req);
 };
 
+/**
+ * Owns cross-cutting HTTP-error UX: shows the right message and, on an expired session, clears auth — then
+ * RETHROWS. Errors stay errors: callers run only their success path, and an unhandled HttpErrorResponse that
+ * reaches the global ErrorHandler is intentionally ignored there (HTTP-error UX lives here). This interceptor
+ * must never convert an error into a value — doing so makes callers treat failures as data.
+ */
 const unauthorizedInterceptor = (req, next) => {
     const messageService = inject(SpiderlyMessageService);
     const translocoService = inject(TranslocoService);
     const config = inject(ConfigServiceBase);
     const authService = inject(AuthServiceBase);
-    const handleAuthError = (err, request) => {
+    const reactToError = (err, request) => {
         if (!config.production) {
             console.error(err);
         }
         let errorResponse = err.error;
-        if (request.responseType != 'json')
-            errorResponse = JSON.parse(err.error);
-        if (err.status == 0) {
+        if (request.responseType !== 'json' && typeof err.error === 'string') {
+            try {
+                errorResponse = JSON.parse(err.error);
+            }
+            catch {
+                errorResponse = null;
+            }
+        }
+        if (err.status === 0) {
+            // Server unreachable; defer so the message isn't lost during a shutdown/refresh race.
             setTimeout(() => {
-                // Had problem when the server is shut down, and try to refresh token, warning message didn't appear
                 messageService.warningMessage(translocoService.translate('ServerLostConnectionDetails'), translocoService.translate('ServerLostConnectionTitle'));
             }, 100);
-            return of(err.message);
         }
-        else if (err.status == 400) {
-            messageService.warningMessage(errorResponse.message ??
-                translocoService.translate('BadRequestDetails'), translocoService.translate('Warning'));
-            return of(err.message);
+        else if (err.status === 400) {
+            messageService.warningMessage(errorResponse?.message ?? translocoService.translate('BadRequestDetails'), translocoService.translate('Warning'));
         }
-        else if (err.status == 401) {
+        else if (err.status === 401) {
             if (errorResponse?.errorCode === ApiErrorCodes.InvalidToken) {
-                authService.clearLocalStorage();
-                return of(err.message);
+                authService.clearSession(); // expired/invalid session — drop it; guards send the user to login
+            }
+            else {
+                messageService.warningMessage(errorResponse?.message ?? translocoService.translate('LoginRequired'), translocoService.translate('Warning'));
             }
-            messageService.warningMessage(errorResponse?.message ?? translocoService.translate('LoginRequired'), translocoService.translate('Warning'));
-            return of(err.message);
         }
-        else if (err.status == 403) {
+        else if (err.status === 403) {
             messageService.warningMessage(translocoService.translate('PermissionErrorDetails'), translocoService.translate('PermissionErrorTitle'));
-            return of(err.message);
         }
-        else if (err.status == 404) {
+        else if (err.status === 404) {
             messageService.warningMessage(translocoService.translate('NotFoundDetails'), translocoService.translate('NotFoundTitle'));
-            return of(err.message);
         }
         else {
             messageService.errorMessage(translocoService.translate('UnexpectedErrorDetails'), translocoService.translate('UnexpectedErrorTitle'));
-            return of(err.message);
         }
     };
     return next(req).pipe(catchError((err) => {
-        return handleAuthError(err, req);
+        reactToError(err, req);
+        return throwError(() => err);
     }));
 };
 
 function authInitializer(authService, platformId) {
     if (isPlatformBrowser(platformId)) {
         return () => {
+            authService.captureExternalAuthError(); // before the router can strip ?externalAuthError on the /login redirect
             return authService.refreshToken();
         };
     }
@@ -5028,5 +5203,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, ExternalProvider, Filter, FilterRule, FilterSortMeta, FooterComponent, GoogleButtonComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginComponent, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, createFakeGoogleWrapper, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, parseDateOnlyLocal, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
+export { Action, AllClickEvent, ApiErrorCodes, ApiSecurityService, AppSidebarComponent, AuthCardComponent, AuthGuard, AuthResult, AuthResultWithCookies, AuthServiceBase, BaseAutocompleteControl, BaseControl, BaseDropdownControl, BaseEntity, BaseFormComponent, BaseFormService, CardSkeletonComponent, Codebook, Column, ConfigServiceBase, DEFAULT_EXTERNAL_PROVIDER_ICONS, ExternalLoginComponent, ExternalProvider, ExternalProviderPublic, Filter, FilterRule, FilterSortMeta, FooterComponent, IndexCardComponent, InfoCardComponent, InitCompanyAuthDialogDetails, InitTopBarData, IsAuthorizedForSaveEvent, LastMenuIconIndexClicked, LayoutServiceBase, LazyLoadSelectedIdsResult, Login, LoginVerificationComponent, LoginVerificationToken, MatchModeCodes, MenuChangeEvent, MenuitemComponent, Namebook, NotAuthGuard, NotFoundComponent, PROPS_KEY, PaginatedResult, PanelBodyComponent, PanelFooterComponent, PanelHeaderComponent, PrimengOption, ProfileAvatarComponent, ReflectProp, RefreshTokenRequest, RequiredComponent, RowClickEvent, SecurityPermissionCodes, SendLoginVerificationEmailResult, SideMenuTopBarComponent, SidebarMenuComponent, SimpleSaveResult, SpiderlyAutocompleteComponent, SpiderlyButtonBaseComponent, SpiderlyButtonComponent, SpiderlyCalendarComponent, SpiderlyCardComponent, SpiderlyCheckboxComponent, SpiderlyColorPickerComponent, SpiderlyControlsModule, SpiderlyDataTableComponent, SpiderlyDataViewComponent, SpiderlyDeleteConfirmationComponent, SpiderlyDropdownComponent, SpiderlyEditorComponent, SpiderlyErrorHandler, SpiderlyFileComponent, SpiderlyFileSelectEvent, SpiderlyFormArray, SpiderlyFormControl, SpiderlyFormGroup, SpiderlyLayoutComponent, SpiderlyLoginComponent, SpiderlyMarkdownComponent, SpiderlyMessageService, SpiderlyMultiAutocompleteComponent, SpiderlyMultiSelectComponent, SpiderlyNumberComponent, SpiderlyPanelComponent, SpiderlyPanelsModule, SpiderlyPasswordComponent, SpiderlyReturnButtonComponent, SpiderlySplitButtonComponent, SpiderlyTab, SpiderlyTemplateTypeDirective, SpiderlyTextareaComponent, SpiderlyTextboxComponent, SpiderlyTranslocoLoader, TopBarComponent, UserBase, UserRole, ValidatorAbstractService, VerificationTokenRequest, VerificationTypeCodes, VerificationWrapperComponent, adjustColor, authInitializer, capitalizeFirstChar, deleteAction, exportListToExcel, firstCharToUpper, getFileNameFromContentDisposition, getHtmlImgDisplayString64, getImageDimensions, getMimeTypeForFileName, getMonth, getParentUrl, getPrimengAutocompleteCodebookOptions, getPrimengAutocompleteNamebookOptions, getPrimengDropdownCodebookOptions, getPrimengDropdownNamebookOptions, getPrimengNamebookOptions, httpLoadingInterceptor, isExcelFileType, isFileImageType, isNullOrEmpty, jsonHttpInterceptor, jwtInterceptor, kebabToTitleCase, nameOf, nameof, parseDateOnlyLocal, primitiveArrayTypes, pushAction, selectedTab, singleOrDefault, splitPascalCase, toCommaSeparatedString, unauthorizedInterceptor, validatePrecisionScale };
 //# sourceMappingURL=spiderly.mjs.map