osl-base-extended 2.0.24 → 2.0.25

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.
@@ -5116,6 +5116,67 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
5116
5116
  args: [OslReportGrid]
5117
5117
  }] } });
5118
5118
 
5119
+ class OslUserLog {
5120
+ el;
5121
+ meta = {};
5122
+ mode = 'bar';
5123
+ isOpen = false;
5124
+ constructor(el) {
5125
+ this.el = el;
5126
+ }
5127
+ onDocumentClick(event) {
5128
+ if (this.mode === 'float' && this.isOpen) {
5129
+ if (!this.el.nativeElement.contains(event.target)) {
5130
+ this.isOpen = false;
5131
+ }
5132
+ }
5133
+ }
5134
+ togglePanel() {
5135
+ this.isOpen = !this.isOpen;
5136
+ }
5137
+ formatDate(date) {
5138
+ if (!date)
5139
+ return '—';
5140
+ const d = new Date(date);
5141
+ if (isNaN(d.getTime()))
5142
+ return String(date);
5143
+ return d.toLocaleString('en-US', {
5144
+ month: 'short',
5145
+ day: 'numeric',
5146
+ year: 'numeric',
5147
+ hour: '2-digit',
5148
+ minute: '2-digit',
5149
+ });
5150
+ }
5151
+ getInitials(name) {
5152
+ if (!name)
5153
+ return '?';
5154
+ return name
5155
+ .trim()
5156
+ .split(/\s+/)
5157
+ .map(n => n[0] ?? '')
5158
+ .join('')
5159
+ .toUpperCase()
5160
+ .slice(0, 2);
5161
+ }
5162
+ get hasData() {
5163
+ return !!(this.meta?.addLog || this.meta?.addOn || this.meta?.editLog || this.meta?.editOn);
5164
+ }
5165
+ 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"] }] });
5167
+ }
5168
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslUserLog, decorators: [{
5169
+ 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"] }]
5171
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { meta: [{
5172
+ type: Input
5173
+ }], mode: [{
5174
+ type: Input
5175
+ }], onDocumentClick: [{
5176
+ type: HostListener,
5177
+ args: ['document:click', ['$event']]
5178
+ }] } });
5179
+
5119
5180
  class FormStructureModule {
5120
5181
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
5121
5182
  static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: FormStructureModule, declarations: [DynamicForm,
@@ -5136,7 +5197,8 @@ class FormStructureModule {
5136
5197
  OslFormGrid,
5137
5198
  OslAutocompleteLister,
5138
5199
  OslReportGrid,
5139
- OslReportForm], imports: [NgTemplateOutlet,
5200
+ OslReportForm,
5201
+ OslUserLog], imports: [NgTemplateOutlet,
5140
5202
  NgStyle,
5141
5203
  NgClass,
5142
5204
  DatePipe,
@@ -5157,7 +5219,7 @@ class FormStructureModule {
5157
5219
  DragDropModule,
5158
5220
  MatTooltipModule,
5159
5221
  NgxMatDatetimepicker,
5160
- NgxMatDatepickerInput], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
5222
+ NgxMatDatepickerInput], exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput, OslUserLog,
5161
5223
  Osltextarea,
5162
5224
  OslSelect,
5163
5225
  OslRadio,
@@ -5210,6 +5272,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
5210
5272
  OslAutocompleteLister,
5211
5273
  OslReportGrid,
5212
5274
  OslReportForm,
5275
+ OslUserLog,
5213
5276
  ],
5214
5277
  imports: [
5215
5278
  NgTemplateOutlet,
@@ -5235,7 +5298,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
5235
5298
  NgxMatDatetimepicker,
5236
5299
  NgxMatDatepickerInput,
5237
5300
  ],
5238
- exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput,
5301
+ exports: [DynamicForm, OslSetup, OslGrid, OslFormGrid, Oslinput, OslUserLog,
5239
5302
  Osltextarea,
5240
5303
  OslSelect,
5241
5304
  OslRadio,
@@ -6512,5 +6575,5 @@ var validation_util = /*#__PURE__*/Object.freeze({
6512
6575
  * Generated bundle index. Do not edit.
6513
6576
  */
6514
6577
 
6515
- export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, validation_util as ValidationUtil, baseComponent };
6578
+ export { array_util as ArrayUtil, date_util as DateUtil, DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, number_util as NumberUtil, object_util as ObjectUtil, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslDatetimepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslReportForm, OslReportGrid, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, OslUserLog, Oslinput, Osltextarea, storage_util as StorageUtil, string_util as StringUtil, validation_util as ValidationUtil, baseComponent };
6516
6579
  //# sourceMappingURL=osl-base-extended.mjs.map