osl-base-extended 8.2.0 → 8.4.0

package/fesm2022/osl-base-extended.mjs

@@ -1824,6 +1824,7 @@ class OslAutocomplete extends baseComponent {
             methodName: this.methodName,
             configMethodName: this.configMethodName,
             service: this.service,
+            apiBody: this.apiBody
         };
         const dialogRef = this.openDialog(undefined, undefined, undefined, '60vw', inputLister, this.listerComponent);
         dialogRef.afterClosed().subscribe((selectedRow) => {
@@ -1847,7 +1848,7 @@ class OslAutocomplete extends baseComponent {
                 .subscribe(async (value) => {
                 if (!value)
                     return;
-                const res = await this.service[this.methodName](value, this.apiBody);
+                const res = await this.service[this.methodName]({ searchValue: value, apiBody: this.apiBody });
                 if (!res.isSuccessful)
                     return;
                 this.datasource = res?.result && Array.isArray(res?.result) ? res.result : res?.result?.data;
@@ -3034,11 +3035,11 @@ class DynamicForm {
         return list.flatMap(e => e.rows?.length ? [e, ...this._flatElements(e.rows)] : [e]);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                        [displayFn]=\"elem.displayFn || null\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody", "displayFn"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: DynamicForm, isStandalone: false, selector: "osl-dynamic-form", inputs: { elements: "elements", model: "model", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange" }, usesOnChanges: true, ngImport: i0, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody ? elem.apiBody(model):null\"\n                        [displayFn]=\"elem.displayFn || null\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"], dependencies: [{ kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: Oslinput, selector: "osl-input", inputs: ["label", "required", "disabled", "model", "type", "placeholder", "mask", "min", "max", "minLength", "maxLength", "prefixIcon", "suffixIcon", "skeletonLoading", "skeletonTheme", "onlyChars", "isCapitalize", "decimalPortion"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: Osltextarea, selector: "osl-textarea", inputs: ["label", "rows", "required", "disabled", "model", "placeholder", "maxLength", "minLength", "characterCounter", "resize", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSelect, selector: "osl-select", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "clearable", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslRadio, selector: "osl-radio", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "inline", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslSlideToggle, selector: "osl-slide-toggle", inputs: ["label", "disabled", "model", "labelPosition", "trueLabel", "falseLabel", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslAutocomplete, selector: "osl-autocomplete", inputs: ["label", "required", "disabled", "model", "datasource", "displayField", "valueField", "placeholder", "loading", "searchType", "methodName", "configMethodName", "service", "object", "skeletonLoading", "skeletonTheme", "isLister", "apiBody", "displayFn"], outputs: ["datasourceChange", "modelChange", "changeEv"] }, { kind: "component", type: OslFileUpload, selector: "osl-file-upload", inputs: ["label", "required", "disabled", "model", "accept", "multiple", "maxSize", "skeletonLoading", "skeletonTheme", "fileMode", "downloadFn"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatepicker, selector: "osl-datepicker", inputs: ["label", "required", "disabled", "model", "dateType", "placeholder", "minDate", "maxDate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslDatetimepicker, selector: "osl-datetimepicker", inputs: ["label", "required", "disabled", "model", "placeholder", "minDatetime", "maxDatetime", "format", "displayFormat", "showSeconds", "enableMeridian", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslCheckbox, selector: "osl-checkbox", inputs: ["label", "disabled", "required", "model", "indeterminate", "skeletonLoading", "skeletonTheme"], outputs: ["modelChange", "changeEv"] }, { kind: "component", type: OslButton, selector: "osl-button", inputs: ["label", "icon", "variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clickEv"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: DynamicForm, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody\"\n                        [displayFn]=\"elem.displayFn || null\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
+            args: [{ selector: 'osl-dynamic-form', standalone: false, template: "@if(elements && elements.length > 0) {\n    <div class=\"row align-items-center w-100\">\n        @for(elem of elements; track elem) {\n            @if(!(elem.hideIf ? elem.hideIf(model) : elem.hide)) {\n                <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: elem }\"></ng-container>\n            }\n        }\n    </div>\n}\n\n<ng-template #formField let-elem>\n    @if(elem.hideIf ? !elem.hideIf(model) : true) {\n        @switch (elem.elementType) {\n\n            @case (\"textbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-input\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [type]=\"elem.inputType || 'text'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [mask]=\"elem.mask || ''\"\n                        [min]=\"elem.min ?? ''\"\n                        [max]=\"elem.max ?? ''\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [prefixIcon]=\"elem.prefixIcon || ''\"\n                        [suffixIcon]=\"elem.suffixIcon || ''\"\n                        [onlyChars]=\"!!elem.onlyChars\"\n                        [decimalPortion]=\"elem.decimalPortion ?? null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                        [isCapitalize]=\"elem.isCapitalize\"\n                    ></osl-input>\n                </div>\n            }\n\n            @case (\"textarea\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-textarea\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [rows]=\"elem.textareaRows || 3\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [maxLength]=\"elem.maxLength ?? null\"\n                        [minLength]=\"elem.minLength ?? null\"\n                        [characterCounter]=\"!!elem.characterCounter\"\n                        [resize]=\"elem.resize || 'none'\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-textarea>\n                </div>\n            }\n\n            @case (\"select\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-select\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.selectPlaceholder || 'Select...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        [clearable]=\"!!elem.clearable\"\n                        (changeEv)=\"elem.change ? onSelectChange(elem, $event) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-select>\n                </div>\n            }\n\n            @case (\"radio\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-radio\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [datasource]=\"elem.datasource || []\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [inline]=\"!!elem.inline\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-radio>\n                </div>\n            }\n\n            @case (\"slide-toggle\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-slide-toggle\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [labelPosition]=\"elem.labelPosition || 'after'\"\n                        [trueLabel]=\"elem.trueLabel || ''\"\n                        [falseLabel]=\"elem.falseLabel || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-slide-toggle>\n                </div>\n            }\n\n            @case (\"autocomplete\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-autocomplete\n                        [label]=\"elem.label\"\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [(datasource)]=\"elem.datasource\"\n                        [displayField]=\"elem.displayField || ''\"\n                        [valueField]=\"elem.valueField || ''\"\n                        [placeholder]=\"elem.autocompletePlaceholder || 'Type to search...'\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        (changeEv)=\"onFieldChange(elem, $event)\"\n                        [(model)]=\"model[elem.key]\"\n                        [methodName]=\"elem.apiMethod\"\n                        [service]=\"elem.apiService\"\n                        [object]=\"model[elem.objectName]\"\n                        [searchType]=\"elem.searchType\"\n                        [configMethodName]=\"elem.apiConfigMethod\"\n                        [isLister]=\"elem.isListerAutocomplete\"\n                        [apiBody]=\"elem.apiBody ? elem.apiBody(model):null\"\n                        [displayFn]=\"elem.displayFn || null\"\n                    ></osl-autocomplete>\n                </div>\n            }\n\n            @case (\"file-uploader\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-file-upload\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [accept]=\"elem.accept || ''\"\n                        [multiple]=\"!!elem.multiple\"\n                        [maxSize]=\"elem.maxFileSize || 0\"\n                        [fileMode]=\"elem.fileMode || 'raw'\"\n                        [downloadFn]=\"elem.fileDownloadFn ? elem.fileDownloadFn.bind(null, model) : null\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-file-upload>\n                </div>\n            }\n\n            @case (\"datepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datepicker\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [dateType]=\"elem.dateType || 'date'\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDate]=\"elem.minDateIf ? elem.minDateIf(model) : elem.minDate || ''\"\n                        [maxDate]=\"elem.maxDateIf ? elem.maxDateIf(model) : elem.maxDate || ''\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datepicker>\n                </div>\n            }\n\n             @case (\"datetimepicker\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-datetimepicker\n                        [skeletonLoading]=\"skeletonLoading\"\n                        [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [placeholder]=\"elem.placeholder || ''\"\n                        [minDatetime]=\"elem.minDatetimeIf ? elem.minDatetimeIf(model) : elem.minDatetime || ''\"\n                        [maxDatetime]=\"elem.maxDatetimeIf ? elem.maxDatetimeIf(model) : elem.maxDatetime || ''\"\n                        [format]=\"elem.datetimepickerFormat || 'YYYY-MM-DDTHH:mm'\"\n                        [showSeconds]=\"!!elem.datetimepickerShowSeconds\"\n                        [enableMeridian]=\"!!elem.datetimepickerEnableMeridian\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                           (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-datetimepicker>\n                </div>\n            }\n\n            @case (\"checkbox\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-checkbox\n                    [skeletonLoading]=\"skeletonLoading\"\n                    [skeletonTheme]=\"skeletonTheme\"\n                        [label]=\"elem.label\"\n                        [disabled]=\"elem.disabledIf ? elem.disabledIf(model) : !!elem.disabled\"\n                        [required]=\"elem.requiredIf ? elem.requiredIf(model) : !!elem.required\"\n                        [indeterminate]=\"!!elem.indeterminate\"\n                        (changeEv)=\"elem.change ? elem.change(model) : null\"\n                        [model]=\"model[elem.key]\"\n                        (modelChange)=\"onModelChange($event, elem.key)\"\n                    ></osl-checkbox>\n                </div>\n            }\n\n            @case (\"button\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                    <osl-button\n                        [label]=\"elem.label\"\n                        [loading]=\"elem.loadingIf ? elem.loadingIf(model) : false\"\n                        variant=\"secondary\"\n                        (clickEv)=\"elem.change ? elem.change(model) : null\"\n                    ></osl-button>\n                </div>\n            }\n\n            @case (\"fieldset\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                    <fieldset class=\"osl-fieldset\">\n                        @if(elem.label) {\n                            <legend class=\"osl-fieldset-legend\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n                                <span class=\"osl-fieldset-legend__text\">{{ elem.label }}</span>\n                            </legend>\n                        }\n                        <div class=\"row w-100 osl-fieldset-body\">\n                            @for(innerElem of elem.rows; track innerElem) {\n                                @if(!(innerElem.hideIf ? innerElem.hideIf(model) : innerElem.hide)) {\n                                    <ng-container *ngTemplateOutlet=\"formField; context: { $implicit: innerElem }\"></ng-container>\n                                }\n                            }\n                        </div>\n                    </fieldset>\n                </div>\n            }\n\n            @case (\"templateRef\"){\n                 <div [class]=\"'col-md-'+elem.columns+' mt-3'\">\n                        <ng-container *ngTemplateOutlet=\"elem.templateRef; context: { $implicit: elem}\"></ng-container>\n                </div>\n            }\n\n             @case (\"spacer\") {\n                <div [class]=\"'col-md-'+elem.columns+' mt-2'\" [attr.data-field-key]=\"elem.key\">\n                </div>\n            }\n\n        }\n    }\n</ng-template>\n", styles: [".osl-fieldset{border:1.5px solid var(--osl-border-color, #e5e7eb);border-radius:10px;padding:0 16px 16px;margin:0;background:linear-gradient(135deg,#f9fafb,#fff);box-shadow:0 1px 4px #0000000d;position:relative;transition:box-shadow .2s}.osl-fieldset:focus-within{box-shadow:0 0 0 3px #6366f114,0 2px 8px #0000000f;border-color:var(--osl-primary, #6366f1)}.osl-fieldset-legend{padding:0 6px;margin-left:8px;line-height:1;float:none;width:auto}.osl-fieldset-legend__text{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:#fff;padding:2px 10px;border:1.5px solid var(--osl-border-color, #e5e7eb);box-shadow:0 1px 3px #6366f11a}.osl-fieldset-body{margin-top:4px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { elements: [{
                 type: Input,
                 args: ['elements']
@@ -4569,7 +4570,8 @@ class OslAutocompleteLister {
             pageSize: pageSize,
             searchValue,
             sortColumn: sortKey,
-            sortColumnDirection: sortColumnDirection
+            sortColumnDirection: sortColumnDirection,
+            apiBody: this.autocompleteData.apiBody
         });
         this.cd.markForCheck();
         if (!res.isSuccessful)
@@ -5873,11 +5875,11 @@ class OslUserLog {
         return !!(this.meta?.addLog || this.meta?.addOn || this.meta?.editLog || this.meta?.editOn);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslUserLog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslUserLog, isStandalone: false, selector: "osl-user-log", inputs: { meta: "meta", mode: "mode" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- \u2500\u2500 BAR MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'bar' && hasData) {\n  <div class=\"osl-user-log osl-user-log--bar\">\n\n    @if (meta.addLog || meta.addOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--add\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n            <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n            <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n            <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Created by</span>\n          @if (meta.addLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.addLog) }}</span>\n            </div>\n          }\n          @if (meta.addOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.addOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if ((meta.addLog || meta.addOn) && (meta.editLog || meta.editOn)) {\n      <div class=\"osl-ul-sep\"></div>\n    }\n\n    @if (meta.editLog || meta.editOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--edit\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n            <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Last Modified by</span>\n          @if (meta.editLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.editLog) }}</span>\n            </div>\n          }\n          @if (meta.editOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.editOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n  </div>\n}\n\n<!-- \u2500\u2500 FLOAT MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'float') {\n  <div class=\"osl-user-log osl-user-log--float\">\n\n    <button\n      class=\"osl-ul-fab\"\n      [class.osl-ul-fab--active]=\"isOpen\"\n      (click)=\"togglePanel()\"\n      type=\"button\"\n      matTooltip=\"Record Info\"\n      matTooltipPosition=\"left\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"9\" cy=\"7\" r=\"4\"/>\n        <path d=\"M1 21v-2a7 7 0 0 1 14 0v2\"/>\n        <line x1=\"17\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n        <line x1=\"17\" y1=\"12\" x2=\"23\" y2=\"12\"/>\n        <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"/>\n      </svg>\n      <span class=\"osl-ul-fab__ping\"></span>\n    </button>\n\n    <div class=\"osl-ul-panel\" [class.osl-ul-panel--open]=\"isOpen\">\n\n      <div class=\"osl-ul-panel__header\">\n        <div class=\"osl-ul-panel__title\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n          </svg>\n          Record Info\n        </div>\n        <button class=\"osl-ul-panel__close\" (click)=\"isOpen = false\" type=\"button\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"osl-ul-panel__body\">\n\n        @if (!hasData) {\n          <div class=\"osl-ul-panel__empty\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n            </svg>\n            No record info available\n          </div>\n        }\n\n        @if (meta.addLog || meta.addOn) {\n          <div class=\"osl-ul-tl-entry\" [class.osl-ul-tl-entry--last]=\"!(meta.editLog || meta.editOn)\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--add\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n                <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n                <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n                <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Created by</span>\n              @if (meta.addLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ meta.addLog }}</span>\n                </div>\n              }\n              @if (meta.addOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.addOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n        @if (meta.editLog || meta.editOn) {\n          <div class=\"osl-ul-tl-entry osl-ul-tl-entry--last\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--edit\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n                <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Last Modified by</span>\n              @if (meta.editLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ meta.editLog }}</span>\n                </div>\n              }\n              @if (meta.editOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.editOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n      </div>\n    </div>\n  </div>\n}\n", styles: [".osl-ul-avatar{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;letter-spacing:.02em;line-height:1}.osl-ul-avatar--add{background:#d1fae5;color:#059669}.osl-ul-avatar--edit{background:#dbeafe;color:var(--osl-primary)}.osl-user-log{font-size:var(--osl-text-font-size);font-family:inherit}.osl-user-log--bar{display:flex;align-items:flex-start;padding:10px 2px 2px;border-top:1px solid var(--osl-border-color);margin-top:16px;animation:osl-ul-fadein .32s ease}.osl-user-log--float{position:fixed;bottom:28px;right:28px;z-index:1050}.osl-ul-entry{flex:1;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;transition:background .15s ease;min-width:0}.osl-ul-entry:hover{background:#f5f8ff}.osl-ul-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.osl-ul-entry__icon svg{width:14px;height:14px}.osl-ul-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-entry__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.osl-ul-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-entry__date{display:flex;align-items:center;gap:4px;font-size:11px;color:#9ca3af;margin-top:1px}.osl-ul-entry__date svg{width:11px;height:11px;flex-shrink:0}.osl-ul-sep{width:1px;background:var(--osl-border-color);align-self:stretch;margin:4px 6px;flex-shrink:0}.osl-ul-fab{position:relative;width:46px;height:46px;border-radius:50%;border:none;background:var(--osl-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #2563eb61;transition:background .2s ease,box-shadow .2s ease,transform .18s ease;outline:none}.osl-ul-fab svg{width:20px;height:20px;transition:transform .35s cubic-bezier(.4,0,.2,1)}.osl-ul-fab:hover{background:var(--osl-primary-hover);box-shadow:0 6px 22px #2563eb80;transform:translateY(-2px)}.osl-ul-fab--active svg{transform:rotate(-25deg) scale(.9)}.osl-ul-fab__ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--osl-primary);opacity:0;animation:osl-ul-ping 2.4s cubic-bezier(0,0,.2,1) infinite}.osl-ul-panel{position:absolute;bottom:56px;right:0;width:292px;background:#fff;border-radius:14px;box-shadow:0 20px 60px #00000021,0 4px 16px #00000014,0 0 0 1px #0000000a;overflow:hidden;transform:translateY(10px) scale(.95);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.175,.885,.32,1.2),opacity .2s ease;transform-origin:bottom right}.osl-ul-panel--open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}.osl-ul-panel__header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}.osl-ul-panel__title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.01em}.osl-ul-panel__title svg{width:15px;height:15px;opacity:.9}.osl-ul-panel__close{width:26px;height:26px;border-radius:6px;border:none;background:#ffffff24;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;padding:0}.osl-ul-panel__close svg{width:13px;height:13px}.osl-ul-panel__close:hover{background:#ffffff42}.osl-ul-panel__body{padding:16px 16px 14px}.osl-ul-panel__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 6px;color:#9ca3af;font-size:12px;text-align:center}.osl-ul-panel__empty svg{width:32px;height:32px;opacity:.45}.osl-ul-tl-entry{display:flex;gap:12px;position:relative;padding-bottom:18px}.osl-ul-tl-entry:before{content:\"\";position:absolute;left:15px;top:33px;bottom:0;width:2px;background:linear-gradient(to bottom,#e5e7eb 60%,transparent);border-radius:1px}.osl-ul-tl-entry--last{padding-bottom:0}.osl-ul-tl-entry--last:before{display:none}.osl-ul-tl-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.osl-ul-tl-entry__icon svg{width:14px;height:14px}.osl-ul-tl-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-tl-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-tl-entry__content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;padding-top:5px}.osl-ul-tl-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-tl-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-tl-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-tl-entry__date{font-size:11px;color:#6b7280;margin-top:1px}@keyframes osl-ul-fadein{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes osl-ul-ping{0%{transform:scale(1);opacity:.5}80%,to{transform:scale(1.55);opacity:0}}\n"], dependencies: [{ kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslUserLog, isStandalone: false, selector: "osl-user-log", inputs: { meta: "meta", mode: "mode" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<!-- \u2500\u2500 BAR MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'bar' && hasData) {\n  <div class=\"osl-user-log osl-user-log--bar\">\n\n    @if (meta.addLog || meta.addOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--add\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n            <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n            <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n            <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Created by</span>\n          @if (meta.addLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.addLog) }}</span>\n            </div>\n          }\n          @if (meta.addOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.addOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if ((meta.addLog || meta.addOn) && (meta.editLog || meta.editOn)) {\n      <div class=\"osl-ul-sep\"></div>\n    }\n\n    @if (meta.editLog || meta.editOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--edit\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n            <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Last Modified by</span>\n          @if (meta.editLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.editLog) }}</span>\n            </div>\n          }\n          @if (meta.editOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.editOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n  </div>\n}\n\n<!-- \u2500\u2500 FLOAT MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'float') {\n  <div class=\"osl-user-log osl-user-log--float\">\n\n    <button\n      class=\"osl-ul-fab\"\n      [class.osl-ul-fab--active]=\"isOpen\"\n      (click)=\"togglePanel()\"\n      type=\"button\"\n      matTooltip=\"Record Info\"\n      matTooltipPosition=\"left\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"9\" cy=\"7\" r=\"4\"/>\n        <path d=\"M1 21v-2a7 7 0 0 1 14 0v2\"/>\n        <line x1=\"17\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n        <line x1=\"17\" y1=\"12\" x2=\"23\" y2=\"12\"/>\n        <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"/>\n      </svg>\n      <span class=\"osl-ul-fab__ping\"></span>\n    </button>\n\n    <div class=\"osl-ul-panel\" [class.osl-ul-panel--open]=\"isOpen\">\n\n      <div class=\"osl-ul-panel__header\">\n        <div class=\"osl-ul-panel__title\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n          </svg>\n          Record Info\n        </div>\n        <button class=\"osl-ul-panel__close\" (click)=\"isOpen = false\" type=\"button\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"osl-ul-panel__body\">\n\n        @if (!hasData) {\n          <div class=\"osl-ul-panel__empty\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n            </svg>\n            No record info available\n          </div>\n        }\n\n        @if (meta.addLog || meta.addOn) {\n          <div class=\"osl-ul-tl-entry\" [class.osl-ul-tl-entry--last]=\"!(meta.editLog || meta.editOn)\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--add\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n                <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n                <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n                <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Created by</span>\n              @if (meta.addLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ getcleanLog(meta.addLog) }}</span>\n                </div>\n              }\n              @if (meta.addOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.addOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n        @if (meta.editLog || meta.editOn) {\n          <div class=\"osl-ul-tl-entry osl-ul-tl-entry--last\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--edit\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n                <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Last Modified by</span>\n              @if (meta.editLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ getcleanLog(meta.editLog) }}</span>\n                </div>\n              }\n              @if (meta.editOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.editOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n      </div>\n    </div>\n  </div>\n}\n", styles: [".osl-ul-avatar{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;letter-spacing:.02em;line-height:1}.osl-ul-avatar--add{background:#d1fae5;color:#059669}.osl-ul-avatar--edit{background:#dbeafe;color:var(--osl-primary)}.osl-user-log{font-size:var(--osl-text-font-size);font-family:inherit}.osl-user-log--bar{display:flex;align-items:flex-start;padding:10px 2px 2px;border-top:1px solid var(--osl-border-color);margin-top:16px;animation:osl-ul-fadein .32s ease}.osl-user-log--float{position:fixed;bottom:28px;right:28px;z-index:1050}.osl-ul-entry{flex:1;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;transition:background .15s ease;min-width:0}.osl-ul-entry:hover{background:#f5f8ff}.osl-ul-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.osl-ul-entry__icon svg{width:14px;height:14px}.osl-ul-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-entry__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.osl-ul-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-entry__date{display:flex;align-items:center;gap:4px;font-size:11px;color:#9ca3af;margin-top:1px}.osl-ul-entry__date svg{width:11px;height:11px;flex-shrink:0}.osl-ul-sep{width:1px;background:var(--osl-border-color);align-self:stretch;margin:4px 6px;flex-shrink:0}.osl-ul-fab{position:relative;width:46px;height:46px;border-radius:50%;border:none;background:var(--osl-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #2563eb61;transition:background .2s ease,box-shadow .2s ease,transform .18s ease;outline:none}.osl-ul-fab svg{width:20px;height:20px;transition:transform .35s cubic-bezier(.4,0,.2,1)}.osl-ul-fab:hover{background:var(--osl-primary-hover);box-shadow:0 6px 22px #2563eb80;transform:translateY(-2px)}.osl-ul-fab--active svg{transform:rotate(-25deg) scale(.9)}.osl-ul-fab__ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--osl-primary);opacity:0;animation:osl-ul-ping 2.4s cubic-bezier(0,0,.2,1) infinite}.osl-ul-panel{position:absolute;bottom:56px;right:0;width:292px;background:#fff;border-radius:14px;box-shadow:0 20px 60px #00000021,0 4px 16px #00000014,0 0 0 1px #0000000a;overflow:hidden;transform:translateY(10px) scale(.95);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.175,.885,.32,1.2),opacity .2s ease;transform-origin:bottom right}.osl-ul-panel--open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}.osl-ul-panel__header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}.osl-ul-panel__title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.01em}.osl-ul-panel__title svg{width:15px;height:15px;opacity:.9}.osl-ul-panel__close{width:26px;height:26px;border-radius:6px;border:none;background:#ffffff24;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;padding:0}.osl-ul-panel__close svg{width:13px;height:13px}.osl-ul-panel__close:hover{background:#ffffff42}.osl-ul-panel__body{padding:16px 16px 14px}.osl-ul-panel__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 6px;color:#9ca3af;font-size:12px;text-align:center}.osl-ul-panel__empty svg{width:32px;height:32px;opacity:.45}.osl-ul-tl-entry{display:flex;gap:12px;position:relative;padding-bottom:18px}.osl-ul-tl-entry:before{content:\"\";position:absolute;left:15px;top:33px;bottom:0;width:2px;background:linear-gradient(to bottom,#e5e7eb 60%,transparent);border-radius:1px}.osl-ul-tl-entry--last{padding-bottom:0}.osl-ul-tl-entry--last:before{display:none}.osl-ul-tl-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.osl-ul-tl-entry__icon svg{width:14px;height:14px}.osl-ul-tl-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-tl-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-tl-entry__content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;padding-top:5px}.osl-ul-tl-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-tl-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-tl-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-tl-entry__date{font-size:11px;color:#6b7280;margin-top:1px}@keyframes osl-ul-fadein{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes osl-ul-ping{0%{transform:scale(1);opacity:.5}80%,to{transform:scale(1.55);opacity:0}}\n"], dependencies: [{ kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslUserLog, decorators: [{
             type: Component,
-            args: [{ selector: 'osl-user-log', standalone: false, template: "<!-- \u2500\u2500 BAR MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'bar' && hasData) {\n  <div class=\"osl-user-log osl-user-log--bar\">\n\n    @if (meta.addLog || meta.addOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--add\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n            <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n            <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n            <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Created by</span>\n          @if (meta.addLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.addLog) }}</span>\n            </div>\n          }\n          @if (meta.addOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.addOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if ((meta.addLog || meta.addOn) && (meta.editLog || meta.editOn)) {\n      <div class=\"osl-ul-sep\"></div>\n    }\n\n    @if (meta.editLog || meta.editOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--edit\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n            <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Last Modified by</span>\n          @if (meta.editLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.editLog) }}</span>\n            </div>\n          }\n          @if (meta.editOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.editOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n  </div>\n}\n\n<!-- \u2500\u2500 FLOAT MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'float') {\n  <div class=\"osl-user-log osl-user-log--float\">\n\n    <button\n      class=\"osl-ul-fab\"\n      [class.osl-ul-fab--active]=\"isOpen\"\n      (click)=\"togglePanel()\"\n      type=\"button\"\n      matTooltip=\"Record Info\"\n      matTooltipPosition=\"left\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"9\" cy=\"7\" r=\"4\"/>\n        <path d=\"M1 21v-2a7 7 0 0 1 14 0v2\"/>\n        <line x1=\"17\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n        <line x1=\"17\" y1=\"12\" x2=\"23\" y2=\"12\"/>\n        <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"/>\n      </svg>\n      <span class=\"osl-ul-fab__ping\"></span>\n    </button>\n\n    <div class=\"osl-ul-panel\" [class.osl-ul-panel--open]=\"isOpen\">\n\n      <div class=\"osl-ul-panel__header\">\n        <div class=\"osl-ul-panel__title\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n          </svg>\n          Record Info\n        </div>\n        <button class=\"osl-ul-panel__close\" (click)=\"isOpen = false\" type=\"button\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"osl-ul-panel__body\">\n\n        @if (!hasData) {\n          <div class=\"osl-ul-panel__empty\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n            </svg>\n            No record info available\n          </div>\n        }\n\n        @if (meta.addLog || meta.addOn) {\n          <div class=\"osl-ul-tl-entry\" [class.osl-ul-tl-entry--last]=\"!(meta.editLog || meta.editOn)\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--add\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n                <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n                <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n                <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Created by</span>\n              @if (meta.addLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ meta.addLog }}</span>\n                </div>\n              }\n              @if (meta.addOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.addOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n        @if (meta.editLog || meta.editOn) {\n          <div class=\"osl-ul-tl-entry osl-ul-tl-entry--last\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--edit\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n                <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Last Modified by</span>\n              @if (meta.editLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ meta.editLog }}</span>\n                </div>\n              }\n              @if (meta.editOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.editOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n      </div>\n    </div>\n  </div>\n}\n", styles: [".osl-ul-avatar{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;letter-spacing:.02em;line-height:1}.osl-ul-avatar--add{background:#d1fae5;color:#059669}.osl-ul-avatar--edit{background:#dbeafe;color:var(--osl-primary)}.osl-user-log{font-size:var(--osl-text-font-size);font-family:inherit}.osl-user-log--bar{display:flex;align-items:flex-start;padding:10px 2px 2px;border-top:1px solid var(--osl-border-color);margin-top:16px;animation:osl-ul-fadein .32s ease}.osl-user-log--float{position:fixed;bottom:28px;right:28px;z-index:1050}.osl-ul-entry{flex:1;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;transition:background .15s ease;min-width:0}.osl-ul-entry:hover{background:#f5f8ff}.osl-ul-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.osl-ul-entry__icon svg{width:14px;height:14px}.osl-ul-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-entry__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.osl-ul-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-entry__date{display:flex;align-items:center;gap:4px;font-size:11px;color:#9ca3af;margin-top:1px}.osl-ul-entry__date svg{width:11px;height:11px;flex-shrink:0}.osl-ul-sep{width:1px;background:var(--osl-border-color);align-self:stretch;margin:4px 6px;flex-shrink:0}.osl-ul-fab{position:relative;width:46px;height:46px;border-radius:50%;border:none;background:var(--osl-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #2563eb61;transition:background .2s ease,box-shadow .2s ease,transform .18s ease;outline:none}.osl-ul-fab svg{width:20px;height:20px;transition:transform .35s cubic-bezier(.4,0,.2,1)}.osl-ul-fab:hover{background:var(--osl-primary-hover);box-shadow:0 6px 22px #2563eb80;transform:translateY(-2px)}.osl-ul-fab--active svg{transform:rotate(-25deg) scale(.9)}.osl-ul-fab__ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--osl-primary);opacity:0;animation:osl-ul-ping 2.4s cubic-bezier(0,0,.2,1) infinite}.osl-ul-panel{position:absolute;bottom:56px;right:0;width:292px;background:#fff;border-radius:14px;box-shadow:0 20px 60px #00000021,0 4px 16px #00000014,0 0 0 1px #0000000a;overflow:hidden;transform:translateY(10px) scale(.95);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.175,.885,.32,1.2),opacity .2s ease;transform-origin:bottom right}.osl-ul-panel--open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}.osl-ul-panel__header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}.osl-ul-panel__title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.01em}.osl-ul-panel__title svg{width:15px;height:15px;opacity:.9}.osl-ul-panel__close{width:26px;height:26px;border-radius:6px;border:none;background:#ffffff24;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;padding:0}.osl-ul-panel__close svg{width:13px;height:13px}.osl-ul-panel__close:hover{background:#ffffff42}.osl-ul-panel__body{padding:16px 16px 14px}.osl-ul-panel__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 6px;color:#9ca3af;font-size:12px;text-align:center}.osl-ul-panel__empty svg{width:32px;height:32px;opacity:.45}.osl-ul-tl-entry{display:flex;gap:12px;position:relative;padding-bottom:18px}.osl-ul-tl-entry:before{content:\"\";position:absolute;left:15px;top:33px;bottom:0;width:2px;background:linear-gradient(to bottom,#e5e7eb 60%,transparent);border-radius:1px}.osl-ul-tl-entry--last{padding-bottom:0}.osl-ul-tl-entry--last:before{display:none}.osl-ul-tl-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.osl-ul-tl-entry__icon svg{width:14px;height:14px}.osl-ul-tl-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-tl-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-tl-entry__content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;padding-top:5px}.osl-ul-tl-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-tl-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-tl-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-tl-entry__date{font-size:11px;color:#6b7280;margin-top:1px}@keyframes osl-ul-fadein{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes osl-ul-ping{0%{transform:scale(1);opacity:.5}80%,to{transform:scale(1.55);opacity:0}}\n"] }]
+            args: [{ selector: 'osl-user-log', standalone: false, template: "<!-- \u2500\u2500 BAR MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'bar' && hasData) {\n  <div class=\"osl-user-log osl-user-log--bar\">\n\n    @if (meta.addLog || meta.addOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--add\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n            <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n            <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n            <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Created by</span>\n          @if (meta.addLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.addLog) }}</span>\n            </div>\n          }\n          @if (meta.addOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.addOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    @if ((meta.addLog || meta.addOn) && (meta.editLog || meta.editOn)) {\n      <div class=\"osl-ul-sep\"></div>\n    }\n\n    @if (meta.editLog || meta.editOn) {\n      <div class=\"osl-ul-entry\">\n        <div class=\"osl-ul-entry__icon osl-ul-entry__icon--edit\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n            <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n          </svg>\n        </div>\n        <div class=\"osl-ul-entry__body\">\n          <span class=\"osl-ul-entry__label\">Last Modified by</span>\n          @if (meta.editLog) {\n            <div class=\"osl-ul-entry__user\">\n              <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n              <span class=\"osl-ul-entry__name\">{{ getcleanLog(meta.editLog) }}</span>\n            </div>\n          }\n          @if (meta.editOn) {\n            <div class=\"osl-ul-entry__date\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n                <polyline points=\"12 6 12 12 16 14\"/>\n              </svg>\n              {{ formatDate(meta.editOn) }}\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n  </div>\n}\n\n<!-- \u2500\u2500 FLOAT MODE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (mode === 'float') {\n  <div class=\"osl-user-log osl-user-log--float\">\n\n    <button\n      class=\"osl-ul-fab\"\n      [class.osl-ul-fab--active]=\"isOpen\"\n      (click)=\"togglePanel()\"\n      type=\"button\"\n      matTooltip=\"Record Info\"\n      matTooltipPosition=\"left\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n        <circle cx=\"9\" cy=\"7\" r=\"4\"/>\n        <path d=\"M1 21v-2a7 7 0 0 1 14 0v2\"/>\n        <line x1=\"17\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n        <line x1=\"17\" y1=\"12\" x2=\"23\" y2=\"12\"/>\n        <line x1=\"17\" y1=\"16\" x2=\"23\" y2=\"16\"/>\n      </svg>\n      <span class=\"osl-ul-fab__ping\"></span>\n    </button>\n\n    <div class=\"osl-ul-panel\" [class.osl-ul-panel--open]=\"isOpen\">\n\n      <div class=\"osl-ul-panel__header\">\n        <div class=\"osl-ul-panel__title\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\n          </svg>\n          Record Info\n        </div>\n        <button class=\"osl-ul-panel__close\" (click)=\"isOpen = false\" type=\"button\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n            <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"/>\n            <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"/>\n          </svg>\n        </button>\n      </div>\n\n      <div class=\"osl-ul-panel__body\">\n\n        @if (!hasData) {\n          <div class=\"osl-ul-panel__empty\">\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\">\n              <circle cx=\"12\" cy=\"12\" r=\"10\"/>\n              <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\n              <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\n            </svg>\n            No record info available\n          </div>\n        }\n\n        @if (meta.addLog || meta.addOn) {\n          <div class=\"osl-ul-tl-entry\" [class.osl-ul-tl-entry--last]=\"!(meta.editLog || meta.editOn)\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--add\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <circle cx=\"12\" cy=\"8\" r=\"4\"/>\n                <path d=\"M4 20c0-4 3.6-7 8-7s8 3 8 7\"/>\n                <line x1=\"19\" y1=\"8\" x2=\"23\" y2=\"8\"/>\n                <line x1=\"21\" y1=\"6\" x2=\"21\" y2=\"10\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Created by</span>\n              @if (meta.addLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--add\">{{ getInitials(meta.addLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ getcleanLog(meta.addLog) }}</span>\n                </div>\n              }\n              @if (meta.addOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.addOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n        @if (meta.editLog || meta.editOn) {\n          <div class=\"osl-ul-tl-entry osl-ul-tl-entry--last\">\n            <div class=\"osl-ul-tl-entry__icon osl-ul-tl-entry__icon--edit\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                <path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/>\n                <path d=\"M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z\"/>\n              </svg>\n            </div>\n            <div class=\"osl-ul-tl-entry__content\">\n              <span class=\"osl-ul-tl-entry__label\">Last Modified by</span>\n              @if (meta.editLog) {\n                <div class=\"osl-ul-tl-entry__user\">\n                  <span class=\"osl-ul-avatar osl-ul-avatar--edit\">{{ getInitials(meta.editLog) }}</span>\n                  <span class=\"osl-ul-tl-entry__name\">{{ getcleanLog(meta.editLog) }}</span>\n                </div>\n              }\n              @if (meta.editOn) {\n                <span class=\"osl-ul-tl-entry__date\">{{ formatDate(meta.editOn) }}</span>\n              }\n            </div>\n          </div>\n        }\n\n      </div>\n    </div>\n  </div>\n}\n", styles: [".osl-ul-avatar{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0;letter-spacing:.02em;line-height:1}.osl-ul-avatar--add{background:#d1fae5;color:#059669}.osl-ul-avatar--edit{background:#dbeafe;color:var(--osl-primary)}.osl-user-log{font-size:var(--osl-text-font-size);font-family:inherit}.osl-user-log--bar{display:flex;align-items:flex-start;padding:10px 2px 2px;border-top:1px solid var(--osl-border-color);margin-top:16px;animation:osl-ul-fadein .32s ease}.osl-user-log--float{position:fixed;bottom:28px;right:28px;z-index:1050}.osl-ul-entry{flex:1;display:flex;align-items:flex-start;gap:10px;padding:8px 10px;border-radius:8px;transition:background .15s ease;min-width:0}.osl-ul-entry:hover{background:#f5f8ff}.osl-ul-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.osl-ul-entry__icon svg{width:14px;height:14px}.osl-ul-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-entry__body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.osl-ul-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-entry__date{display:flex;align-items:center;gap:4px;font-size:11px;color:#9ca3af;margin-top:1px}.osl-ul-entry__date svg{width:11px;height:11px;flex-shrink:0}.osl-ul-sep{width:1px;background:var(--osl-border-color);align-self:stretch;margin:4px 6px;flex-shrink:0}.osl-ul-fab{position:relative;width:46px;height:46px;border-radius:50%;border:none;background:var(--osl-primary);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #2563eb61;transition:background .2s ease,box-shadow .2s ease,transform .18s ease;outline:none}.osl-ul-fab svg{width:20px;height:20px;transition:transform .35s cubic-bezier(.4,0,.2,1)}.osl-ul-fab:hover{background:var(--osl-primary-hover);box-shadow:0 6px 22px #2563eb80;transform:translateY(-2px)}.osl-ul-fab--active svg{transform:rotate(-25deg) scale(.9)}.osl-ul-fab__ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--osl-primary);opacity:0;animation:osl-ul-ping 2.4s cubic-bezier(0,0,.2,1) infinite}.osl-ul-panel{position:absolute;bottom:56px;right:0;width:292px;background:#fff;border-radius:14px;box-shadow:0 20px 60px #00000021,0 4px 16px #00000014,0 0 0 1px #0000000a;overflow:hidden;transform:translateY(10px) scale(.95);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.175,.885,.32,1.2),opacity .2s ease;transform-origin:bottom right}.osl-ul-panel--open{transform:translateY(0) scale(1);opacity:1;pointer-events:all}.osl-ul-panel__header{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 11px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}.osl-ul-panel__title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:.01em}.osl-ul-panel__title svg{width:15px;height:15px;opacity:.9}.osl-ul-panel__close{width:26px;height:26px;border-radius:6px;border:none;background:#ffffff24;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease;padding:0}.osl-ul-panel__close svg{width:13px;height:13px}.osl-ul-panel__close:hover{background:#ffffff42}.osl-ul-panel__body{padding:16px 16px 14px}.osl-ul-panel__empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 6px;color:#9ca3af;font-size:12px;text-align:center}.osl-ul-panel__empty svg{width:32px;height:32px;opacity:.45}.osl-ul-tl-entry{display:flex;gap:12px;position:relative;padding-bottom:18px}.osl-ul-tl-entry:before{content:\"\";position:absolute;left:15px;top:33px;bottom:0;width:2px;background:linear-gradient(to bottom,#e5e7eb 60%,transparent);border-radius:1px}.osl-ul-tl-entry--last{padding-bottom:0}.osl-ul-tl-entry--last:before{display:none}.osl-ul-tl-entry__icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}.osl-ul-tl-entry__icon svg{width:14px;height:14px}.osl-ul-tl-entry__icon--add{background:#d1fae5;color:#059669}.osl-ul-tl-entry__icon--edit{background:#dbeafe;color:var(--osl-primary)}.osl-ul-tl-entry__content{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;padding-top:5px}.osl-ul-tl-entry__label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;line-height:1}.osl-ul-tl-entry__user{display:flex;align-items:center;gap:6px;margin-top:2px}.osl-ul-tl-entry__name{font-size:var(--osl-text-font-size);font-weight:500;color:#111827;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.osl-ul-tl-entry__date{font-size:11px;color:#6b7280;margin-top:1px}@keyframes osl-ul-fadein{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes osl-ul-ping{0%{transform:scale(1);opacity:.5}80%,to{transform:scale(1.55);opacity:0}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { meta: [{
                 type: Input
             }], mode: [{