osl-base-extended 2.0.25 → 2.0.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -20,6 +20,7 @@ import * as i6 from '@angular/material/tooltip';
|
|
|
20
20
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
21
21
|
import * as i5 from '@angular/material/datepicker';
|
|
22
22
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
23
|
+
import { MAT_DATE_FORMATS } from '@angular/material/core';
|
|
23
24
|
import * as i4 from '@ngxmc/datetime-picker';
|
|
24
25
|
import { NgxMatDatetimepicker, NgxMatDatepickerInput } from '@ngxmc/datetime-picker';
|
|
25
26
|
import { MatInputModule } from '@angular/material/input';
|
|
@@ -2469,11 +2470,35 @@ class OslDatetimepicker {
|
|
|
2469
2470
|
return isNaN(d.getTime()) ? null : d;
|
|
2470
2471
|
}
|
|
2471
2472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatetimepicker, isStandalone: false, selector: "osl-datetimepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", minDatetime: "minDatetime", maxDatetime: "maxDatetime", format: "format", displayFormatInput: ["displayFormat", "displayFormatInput"], showSeconds: "showSeconds", enableMeridian: "enableMeridian", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" },
|
|
2473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatetimepicker, isStandalone: false, selector: "osl-datetimepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", minDatetime: "minDatetime", maxDatetime: "maxDatetime", format: "format", displayFormatInput: ["displayFormat", "displayFormatInput"], showSeconds: "showSeconds", enableMeridian: "enableMeridian", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, providers: [
|
|
2474
|
+
{
|
|
2475
|
+
provide: MAT_DATE_FORMATS,
|
|
2476
|
+
useValue: {
|
|
2477
|
+
parse: {
|
|
2478
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2479
|
+
},
|
|
2480
|
+
display: {
|
|
2481
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2482
|
+
}
|
|
2483
|
+
}
|
|
2484
|
+
}
|
|
2485
|
+
], viewQueries: [{ propertyName: "dtNativeInput", first: true, predicate: ["dtNativeInput"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n </label>\n </div>\n }\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <input\n class=\"dt-input\"\n [ngxMatDatetimePicker]=\"picker\"\n [ngModel]=\"dateModel\"\n (ngModelChange)=\"onDateChange($event)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [placeholder]=\"placeholder\"\n [class.error]=\"dtField.touched && dtField.invalid\"\n #dtField=\"ngModel\"\n readonly\n />\n <button\n type=\"button\"\n class=\"dt-icon-btn\"\n (click)=\"picker.open()\"\n [disabled]=\"disabled\"\n tabindex=\"-1\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"14\" height=\"14\" rx=\"2\"/>\n <line x1=\"3\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"6\"/>\n <line x1=\"13\" y1=\"2\" x2=\"13\" y2=\"6\"/>\n </svg>\n </button>\n <ngx-mat-datetime-picker\n #picker\n [showSpinners]=\"true\"\n [showSeconds]=\"showSeconds\"\n [enableMeridian]=\"enableMeridian\">\n </ngx-mat-datetime-picker>\n </div>\n @if (dtField.touched && dtField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.dt-icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;background:transparent;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center;transition:color .15s;border-radius:4px}.dt-icon-btn svg{width:16px;height:16px;display:block}.dt-icon-btn:hover:not(:disabled){color:var(--osl-focus-border-color)}.dt-icon-btn:disabled{opacity:.35;cursor:not-allowed}.dt-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 38px 0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}\n"], dependencies: [{ kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: i4.NgxMatDatetimepicker, selector: "ngx-mat-datetime-picker", exportAs: ["ngxMatDatetimePicker"] }, { kind: "directive", type: i4.NgxMatDatepickerInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "min", "max", "matDatepickerFilter"], exportAs: ["ngxMatDatepickerInput"] }] });
|
|
2473
2486
|
}
|
|
2474
2487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, decorators: [{
|
|
2475
2488
|
type: Component,
|
|
2476
|
-
args: [{ selector: 'osl-datetimepicker', standalone: false,
|
|
2489
|
+
args: [{ selector: 'osl-datetimepicker', standalone: false, providers: [
|
|
2490
|
+
{
|
|
2491
|
+
provide: MAT_DATE_FORMATS,
|
|
2492
|
+
useValue: {
|
|
2493
|
+
parse: {
|
|
2494
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2495
|
+
},
|
|
2496
|
+
display: {
|
|
2497
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2498
|
+
}
|
|
2499
|
+
}
|
|
2500
|
+
}
|
|
2501
|
+
], template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n </label>\n </div>\n }\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <input\n class=\"dt-input\"\n [ngxMatDatetimePicker]=\"picker\"\n [ngModel]=\"dateModel\"\n (ngModelChange)=\"onDateChange($event)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [placeholder]=\"placeholder\"\n [class.error]=\"dtField.touched && dtField.invalid\"\n #dtField=\"ngModel\"\n readonly\n />\n <button\n type=\"button\"\n class=\"dt-icon-btn\"\n (click)=\"picker.open()\"\n [disabled]=\"disabled\"\n tabindex=\"-1\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"14\" height=\"14\" rx=\"2\"/>\n <line x1=\"3\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"6\"/>\n <line x1=\"13\" y1=\"2\" x2=\"13\" y2=\"6\"/>\n </svg>\n </button>\n <ngx-mat-datetime-picker\n #picker\n [showSpinners]=\"true\"\n [showSeconds]=\"showSeconds\"\n [enableMeridian]=\"enableMeridian\">\n </ngx-mat-datetime-picker>\n </div>\n @if (dtField.touched && dtField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.dt-icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;background:transparent;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center;transition:color .15s;border-radius:4px}.dt-icon-btn svg{width:16px;height:16px;display:block}.dt-icon-btn:hover:not(:disabled){color:var(--osl-focus-border-color)}.dt-icon-btn:disabled{opacity:.35;cursor:not-allowed}.dt-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 38px 0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}\n"] }]
|
|
2477
2502
|
}], propDecorators: { dtNativeInput: [{
|
|
2478
2503
|
type: ViewChild,
|
|
2479
2504
|
args: ['dtNativeInput']
|
|
@@ -5163,11 +5188,11 @@ class OslUserLog {
|
|
|
5163
5188
|
return !!(this.meta?.addLog || this.meta?.addOn || this.meta?.editLog || this.meta?.editOn);
|
|
5164
5189
|
}
|
|
5165
5190
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslUserLog, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
5166
|
-
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\">{{ 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\">{{ 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 <polyline points=\"1 4 1 10 7 10\"/>\n <path d=\"M3.51 15a9 9 0 1 0 .49-3.5\"/>\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"] }] });
|
|
5191
|
+
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\">{{ 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\">{{ 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"] }] });
|
|
5167
5192
|
}
|
|
5168
5193
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslUserLog, decorators: [{
|
|
5169
5194
|
type: Component,
|
|
5170
|
-
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\">{{ 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\">{{ 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 <polyline points=\"1 4 1 10 7 10\"/>\n <path d=\"M3.51 15a9 9 0 1 0 .49-3.5\"/>\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"] }]
|
|
5195
|
+
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\">{{ 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\">{{ 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"] }]
|
|
5171
5196
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { meta: [{
|
|
5172
5197
|
type: Input
|
|
5173
5198
|
}], mode: [{
|