osl-base-extended 2.0.25 → 2.0.26
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.
|
@@ -5163,11 +5163,11 @@ class OslUserLog {
|
|
|
5163
5163
|
return !!(this.meta?.addLog || this.meta?.addOn || this.meta?.editLog || this.meta?.editOn);
|
|
5164
5164
|
}
|
|
5165
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"] }] });
|
|
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 <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
5167
|
}
|
|
5168
5168
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslUserLog, decorators: [{
|
|
5169
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"] }]
|
|
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 <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
5171
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { meta: [{
|
|
5172
5172
|
type: Input
|
|
5173
5173
|
}], mode: [{
|