@limetech/lime-crm-building-blocks 1.50.1 → 1.50.2
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.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/limebb-notification-item.cjs.entry.js +1 -1
- package/dist/cjs/limebb-notification-list.cjs.entry.js +1 -1
- package/dist/collection/components/notification-list/notification-item/notification-item.css +7 -10
- package/dist/collection/components/notification-list/notification-list.css +2 -3
- package/dist/components/limebb-notification-list.js +1 -1
- package/dist/components/notification-item.js +1 -1
- package/dist/esm/limebb-notification-item.entry.js +1 -1
- package/dist/esm/limebb-notification-list.entry.js +1 -1
- package/dist/lime-crm-building-blocks/lime-crm-building-blocks.esm.js +1 -1
- package/dist/lime-crm-building-blocks/p-54c38e90.entry.js +1 -0
- package/dist/lime-crm-building-blocks/{p-f648b07d.entry.js → p-c8370ef6.entry.js} +1 -1
- package/package.json +3 -3
- package/dist/lime-crm-building-blocks/p-2488b414.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## [1.50.2](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.50.1...v1.50.2) (2024-11-18)
|
|
2
|
+
|
|
3
|
+
### Bug Fixes
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
* **notification-list:** improve readability ([6d7a380](https://github.com/Lundalogik/lime-crm-building-blocks/commit/6d7a3807bb454bd9b2a063b65a7867c64d1af533))
|
|
7
|
+
|
|
1
8
|
## [1.50.1](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.50.0...v1.50.1) (2024-11-13)
|
|
2
9
|
|
|
3
10
|
### Bug Fixes
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-dd1aef9e.js');
|
|
6
6
|
const types = require('./types-65ad678a.js');
|
|
7
7
|
|
|
8
|
-
const notificationItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid
|
|
8
|
+
const notificationItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid rgb(var(--contrast-500))}.notification-item:before{content:\"\";display:block;position:absolute;left:-1rem;top:0.85rem;border-radius:50%;height:0.5rem;width:0.5rem;transition:background-color 0.2s ease;background-color:var(--limebb-notification-item-unread-badge-color, transparent)}:host(limebb-notification-item.is-clickable) .notification-item{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:focus,:host(limebb-notification-item.is-clickable) .notification-item:focus-visible{will-change:color, background-color, box-shadow, transform}:host(limebb-notification-item.is-clickable) .notification-item:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limebb-notification-item.is-read) .notification-item{border-color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-500))}:host(limebb-notification-item.is-clickable) .notification-item:hover{border-color:transparent}:host(limebb-notification-item:not(.is-read)) .notification-item{--limebb-notification-item-unread-badge-color:rgb(\n var(--color-red-default)\n );background-color:rgb(var(--contrast-100))}:host(limebb-notification-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-notification-item:hover) .body-text{opacity:1}.header{display:flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0 0 0.25rem;margin-bottom:0.25rem}.header:not(:has(.icon)){padding-left:0.75rem}.header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.caption,.timestamp{font-size:0.75rem}.caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;flex-grow:1;font-weight:600;color:rgb(var(--contrast-900))}.timestamp{flex-shrink:0;margin-left:auto;transition:color 0.4s ease, opacity 0.2s ease;color:rgb(var(--contrast-900))}.headline{display:flex;gap:0.25rem;align-items:center}.content{display:flex;min-width:0;gap:0.5rem;padding:0 0.75rem 0.5rem 0.75rem}.heading{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.5rem;font-size:0.875rem;--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.body{display:flex;flex-direction:column;gap:0.5rem}.body-text{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:4.25rem;transition:opacity 0.2s ease;opacity:0.7}.icon{--icon-background-color:var(--limebb-feed-background-color);flex-shrink:0;width:1.5rem;padding:0.125rem}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;margin-top:auto;margin-right:-0.25rem;margin-left:auto;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}";
|
|
9
9
|
|
|
10
10
|
const NotificationListItem = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -124,7 +124,7 @@ function insertDateGroups(context) {
|
|
|
124
124
|
return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
|
|
125
125
|
}
|
|
126
126
|
|
|
127
|
-
const notificationListCss = ":host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:
|
|
127
|
+
const notificationListCss = ":host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:0.5rem}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:var(--limebb-notification-list-background-color)}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}";
|
|
128
128
|
|
|
129
129
|
const NotificationList = class {
|
|
130
130
|
constructor(hostRef) {
|
package/dist/collection/components/notification-list/notification-item/notification-item.css
CHANGED
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
flex-direction: column;
|
|
74
74
|
gap: 0.25rem;
|
|
75
75
|
border-radius: 0.75rem;
|
|
76
|
-
border: 1px solid
|
|
76
|
+
border: 1px solid rgb(var(--contrast-500));
|
|
77
77
|
}
|
|
78
78
|
.notification-item:before {
|
|
79
79
|
content: "";
|
|
@@ -117,15 +117,13 @@
|
|
|
117
117
|
--limel-clickable-transform-speed: 0.16s;
|
|
118
118
|
}
|
|
119
119
|
:host(limebb-notification-item.is-read) .notification-item {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
background-color: rgb(var(--contrast-400));
|
|
120
|
+
border-color: rgb(var(--contrast-600));
|
|
121
|
+
background-color: rgb(var(--contrast-500));
|
|
123
122
|
}
|
|
124
|
-
:host(limebb-notification-item.is-
|
|
123
|
+
:host(limebb-notification-item.is-clickable) .notification-item:hover {
|
|
125
124
|
border-color: transparent;
|
|
126
125
|
}
|
|
127
126
|
:host(limebb-notification-item:not(.is-read)) .notification-item {
|
|
128
|
-
--limebb-notification-header-border-color: rgb(var(--contrast-400));
|
|
129
127
|
--limebb-notification-item-unread-badge-color: rgb(
|
|
130
128
|
var(--color-red-default)
|
|
131
129
|
);
|
|
@@ -146,7 +144,6 @@
|
|
|
146
144
|
min-height: 2rem;
|
|
147
145
|
padding: 0 0 0 0.25rem;
|
|
148
146
|
margin-bottom: 0.25rem;
|
|
149
|
-
border-bottom: 1px solid var(--limebb-notification-header-border-color);
|
|
150
147
|
}
|
|
151
148
|
.header:not(:has(.icon)) {
|
|
152
149
|
padding-left: 0.75rem;
|
|
@@ -174,7 +171,7 @@
|
|
|
174
171
|
flex-shrink: 0;
|
|
175
172
|
margin-left: auto;
|
|
176
173
|
transition: color 0.4s ease, opacity 0.2s ease;
|
|
177
|
-
color: rgb(var(--contrast-
|
|
174
|
+
color: rgb(var(--contrast-900));
|
|
178
175
|
}
|
|
179
176
|
|
|
180
177
|
.headline {
|
|
@@ -196,7 +193,7 @@
|
|
|
196
193
|
white-space: normal;
|
|
197
194
|
-webkit-box-orient: vertical;
|
|
198
195
|
-webkit-line-clamp: 2;
|
|
199
|
-
max-height:
|
|
196
|
+
max-height: 2.5rem;
|
|
200
197
|
font-size: 0.875rem;
|
|
201
198
|
--markdown-hyperlink-color: var(--mdc-theme-primary);
|
|
202
199
|
--markdown-hyperlink-color--hovered: rgb(var(--color-teal-light));
|
|
@@ -213,7 +210,7 @@
|
|
|
213
210
|
overflow: hidden;
|
|
214
211
|
white-space: normal;
|
|
215
212
|
-webkit-box-orient: vertical;
|
|
216
|
-
-webkit-line-clamp:
|
|
213
|
+
-webkit-line-clamp: 3;
|
|
217
214
|
max-height: 4.25rem;
|
|
218
215
|
transition: opacity 0.2s ease;
|
|
219
216
|
opacity: 0.7;
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
gap: 1rem;
|
|
12
12
|
max-width: 45rem;
|
|
13
13
|
background-color: var(--limebb-notification-list-background-color);
|
|
14
|
-
padding:
|
|
14
|
+
padding: 0.5rem;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
limel-spinner {
|
|
@@ -38,8 +38,7 @@ limel-spinner {
|
|
|
38
38
|
width: fit-content;
|
|
39
39
|
font-size: 0.75rem;
|
|
40
40
|
line-height: 1;
|
|
41
|
-
color: rgb(var(--contrast-
|
|
42
|
-
border: 1px solid var(--limebb-notification-list-background-color);
|
|
41
|
+
color: rgb(var(--contrast-900));
|
|
43
42
|
backdrop-filter: blur(0.5rem);
|
|
44
43
|
-webkit-backdrop-filter: blur(0.5rem);
|
|
45
44
|
transition: color 0.2s ease, border-color 0.4s ease;
|
|
@@ -121,7 +121,7 @@ function insertDateGroups(context) {
|
|
|
121
121
|
return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
|
|
122
122
|
}
|
|
123
123
|
|
|
124
|
-
const notificationListCss = ":host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:
|
|
124
|
+
const notificationListCss = ":host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:0.5rem}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:var(--limebb-notification-list-background-color)}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}";
|
|
125
125
|
|
|
126
126
|
const NotificationList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
127
127
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { P as PlatformServiceName } from './types.js';
|
|
3
3
|
|
|
4
|
-
const notificationItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid
|
|
4
|
+
const notificationItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid rgb(var(--contrast-500))}.notification-item:before{content:\"\";display:block;position:absolute;left:-1rem;top:0.85rem;border-radius:50%;height:0.5rem;width:0.5rem;transition:background-color 0.2s ease;background-color:var(--limebb-notification-item-unread-badge-color, transparent)}:host(limebb-notification-item.is-clickable) .notification-item{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:focus,:host(limebb-notification-item.is-clickable) .notification-item:focus-visible{will-change:color, background-color, box-shadow, transform}:host(limebb-notification-item.is-clickable) .notification-item:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limebb-notification-item.is-read) .notification-item{border-color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-500))}:host(limebb-notification-item.is-clickable) .notification-item:hover{border-color:transparent}:host(limebb-notification-item:not(.is-read)) .notification-item{--limebb-notification-item-unread-badge-color:rgb(\n var(--color-red-default)\n );background-color:rgb(var(--contrast-100))}:host(limebb-notification-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-notification-item:hover) .body-text{opacity:1}.header{display:flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0 0 0.25rem;margin-bottom:0.25rem}.header:not(:has(.icon)){padding-left:0.75rem}.header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.caption,.timestamp{font-size:0.75rem}.caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;flex-grow:1;font-weight:600;color:rgb(var(--contrast-900))}.timestamp{flex-shrink:0;margin-left:auto;transition:color 0.4s ease, opacity 0.2s ease;color:rgb(var(--contrast-900))}.headline{display:flex;gap:0.25rem;align-items:center}.content{display:flex;min-width:0;gap:0.5rem;padding:0 0.75rem 0.5rem 0.75rem}.heading{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.5rem;font-size:0.875rem;--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.body{display:flex;flex-direction:column;gap:0.5rem}.body-text{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:4.25rem;transition:opacity 0.2s ease;opacity:0.7}.icon{--icon-background-color:var(--limebb-feed-background-color);flex-shrink:0;width:1.5rem;padding:0.125rem}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;margin-top:auto;margin-right:-0.25rem;margin-left:auto;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}";
|
|
5
5
|
|
|
6
6
|
const NotificationListItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, c as createEvent, h, H as Host } from './index-a0338355.js';
|
|
2
2
|
import { P as PlatformServiceName } from './types-14a87c15.js';
|
|
3
3
|
|
|
4
|
-
const notificationItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid
|
|
4
|
+
const notificationItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid rgb(var(--contrast-500))}.notification-item:before{content:\"\";display:block;position:absolute;left:-1rem;top:0.85rem;border-radius:50%;height:0.5rem;width:0.5rem;transition:background-color 0.2s ease;background-color:var(--limebb-notification-item-unread-badge-color, transparent)}:host(limebb-notification-item.is-clickable) .notification-item{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:focus,:host(limebb-notification-item.is-clickable) .notification-item:focus-visible{will-change:color, background-color, box-shadow, transform}:host(limebb-notification-item.is-clickable) .notification-item:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limebb-notification-item.is-read) .notification-item{border-color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-500))}:host(limebb-notification-item.is-clickable) .notification-item:hover{border-color:transparent}:host(limebb-notification-item:not(.is-read)) .notification-item{--limebb-notification-item-unread-badge-color:rgb(\n var(--color-red-default)\n );background-color:rgb(var(--contrast-100))}:host(limebb-notification-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-notification-item:hover) .body-text{opacity:1}.header{display:flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0 0 0.25rem;margin-bottom:0.25rem}.header:not(:has(.icon)){padding-left:0.75rem}.header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.caption,.timestamp{font-size:0.75rem}.caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;flex-grow:1;font-weight:600;color:rgb(var(--contrast-900))}.timestamp{flex-shrink:0;margin-left:auto;transition:color 0.4s ease, opacity 0.2s ease;color:rgb(var(--contrast-900))}.headline{display:flex;gap:0.25rem;align-items:center}.content{display:flex;min-width:0;gap:0.5rem;padding:0 0.75rem 0.5rem 0.75rem}.heading{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.5rem;font-size:0.875rem;--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.body{display:flex;flex-direction:column;gap:0.5rem}.body-text{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:4.25rem;transition:opacity 0.2s ease;opacity:0.7}.icon{--icon-background-color:var(--limebb-feed-background-color);flex-shrink:0;width:1.5rem;padding:0.125rem}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;margin-top:auto;margin-right:-0.25rem;margin-left:auto;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:\"\";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}";
|
|
5
5
|
|
|
6
6
|
const NotificationListItem = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -120,7 +120,7 @@ function insertDateGroups(context) {
|
|
|
120
120
|
return Object.assign(Object.assign({}, context), { processedItems: newProcessedItems });
|
|
121
121
|
}
|
|
122
122
|
|
|
123
|
-
const notificationListCss = ":host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:
|
|
123
|
+
const notificationListCss = ":host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:0.5rem}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:\"\";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:var(--limebb-notification-list-background-color)}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}";
|
|
124
124
|
|
|
125
125
|
const NotificationList = class {
|
|
126
126
|
constructor(hostRef) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-8e85017b.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t([["p-117f668f",[[1,"limebb-feed",{platform:[16],context:[16],items:[16],emptyStateMessage:[1,"empty-state-message"],heading:[1],loading:[4],minutesOfProximity:[2,"minutes-of-proximity"],totalCount:[2,"total-count"],lastVisitedTimestamp:[1,"last-visited-timestamp"]}]]],["p-32ab34e5",[[1,"limebb-kanban",{platform:[16],context:[16],items:[16],paginationSize:[2,"pagination-size"],groupBy:[513,"group-by"],groups:[16]}]]],["p-2e549d89",[[1,"limebb-date-range",{platform:[16],context:[16],startTime:[16],endTime:[16],startTimeLabel:[1,"start-time-label"],endTimeLabel:[1,"end-time-label"],language:[1],timeFormat:[1,"time-format"],type:[1]}]]],["p-beb4e864",[[1,"limebb-info-tile-currency-format",{platform:[16],context:[16],value:[16]}]]],["p-
|
|
1
|
+
import{p as e,b as t}from"./p-8e85017b.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((e=>t([["p-117f668f",[[1,"limebb-feed",{platform:[16],context:[16],items:[16],emptyStateMessage:[1,"empty-state-message"],heading:[1],loading:[4],minutesOfProximity:[2,"minutes-of-proximity"],totalCount:[2,"total-count"],lastVisitedTimestamp:[1,"last-visited-timestamp"]}]]],["p-32ab34e5",[[1,"limebb-kanban",{platform:[16],context:[16],items:[16],paginationSize:[2,"pagination-size"],groupBy:[513,"group-by"],groups:[16]}]]],["p-2e549d89",[[1,"limebb-date-range",{platform:[16],context:[16],startTime:[16],endTime:[16],startTimeLabel:[1,"start-time-label"],endTimeLabel:[1,"end-time-label"],language:[1],timeFormat:[1,"time-format"],type:[1]}]]],["p-beb4e864",[[1,"limebb-info-tile-currency-format",{platform:[16],context:[16],value:[16]}]]],["p-c8370ef6",[[1,"limebb-notification-list",{platform:[16],context:[16],items:[16],loading:[4],lastVisitedTimestamp:[1,"last-visited-timestamp"]}]]],["p-5f075485",[[1,"limebb-text-editor",{platform:[16],context:[16],selectedContext:[16],uiType:[8,"ui-type"],allowResize:[4,"allow-resize"],value:[1],items:[32],customElements:[32],registeredTriggers:[32],editorPickerQuery:[32],coworkerLimetype:[32],isPickerOpen:[32]}]]],["p-4b60c5a3",[[17,"limebb-browser",{platform:[16],context:[16],items:[16],layout:[1],filter:[32]}]]],["p-7ddcb65a",[[1,"limebb-component-config",{platform:[16],context:[16],value:[16],required:[4],readonly:[4],disabled:[4],label:[1],helperText:[1,"helper-text"],formInfo:[16],type:[1],nameField:[1,"name-field"],configComponent:[32],configViewType:[32]}]]],["p-98ce1c1d",[[1,"limebb-component-picker",{platform:[16],context:[16],type:[1],tags:[16],value:[1],copyLabel:[1,"copy-label"],hideCopyButton:[4,"hide-copy-button"],required:[4],readonly:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-74dfea73",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-8aafd8fb",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-f7a3fe1d",[[1,"limebb-info-tile",{platform:[16],context:[16],filterId:[513,"filter-id"],disabled:[4],icon:[513],label:[1],prefix:[1],suffix:[1],propertyName:[1,"property-name"],aggregateOperator:[1,"aggregate-operator"],format:[16],config:[32],filters:[32],value:[32],loading:[32],error:[32]}]]],["p-3602eb38",[[1,"limebb-info-tile-date-format",{value:[16]}]]],["p-87d08f0d",[[1,"limebb-info-tile-decimal-format",{value:[16]}]]],["p-2867f980",[[1,"limebb-info-tile-format",{platform:[16],context:[16],type:[1],value:[16]}]]],["p-c163374e",[[1,"limebb-info-tile-relative-date-format",{value:[16]}]]],["p-d0a17301",[[1,"limebb-info-tile-unit-format",{value:[16]}]]],["p-8dfb79e0",[[1,"limebb-limeobject-file-viewer",{platform:[16],context:[16],property:[1],fileTypes:[16],limeobject:[32],limetype:[32]}]]],["p-8ba97e32",[[1,"limebb-locale-picker",{platform:[16],context:[16],value:[1],required:[4],disabled:[4],label:[1],helperText:[1,"helper-text"],readonly:[4],multipleChoice:[4,"multiple-choice"],allLanguages:[32]}]]],["p-3d8fe6cc",[[1,"limebb-mention",{limetype:[1],objectid:[2],limeobject:[32]}]]],["p-25011706",[[17,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-b26fc50f",[[1,"limebb-kanban-column",{platform:[16],context:[16],columnHeading:[1,"column-heading"],items:[16],loading:[4],paginationSize:[2,"pagination-size"],displayedItemCount:[32]}]]],["p-e3fc55d6",[[1,"limebb-currency-picker",{platform:[16],context:[16],label:[513],currencies:[16],helperText:[513,"helper-text"],required:[516],readonly:[516],invalid:[516],disabled:[516],value:[1]}]]],["p-08d58041",[[1,"limebb-date-picker",{platform:[16],context:[16],disabled:[516],readonly:[516],invalid:[516],label:[513],placeholder:[513],helperText:[513,"helper-text"],required:[516],value:[1],type:[513]}]]],["p-54c38e90",[[1,"limebb-notification-item",{platform:[16],context:[16],item:[16]}]]],["p-3b38867a",[[1,"limebb-text-editor-picker",{items:[16],open:[516],emptyMessage:[1,"empty-message"]}]]],["p-63929d5d",[[1,"limebb-empty-state",{heading:[513],value:[513],icon:[16]}],[1,"limebb-feed-timeline-item",{platform:[16],context:[16],item:[16],ui:[513],isBundled:[516,"is-bundled"],headingCanExpand:[32],isHeadingExpanded:[32],showMore:[32],isTall:[32]}]]],["p-8295211a",[[1,"limebb-kanban-item",{platform:[16],context:[16],item:[16]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as i,c as t,h as e,H as o}from"./p-8e85017b.js";import{P as r}from"./p-3f4595a3.js";const a=class{constructor(o){i(this,o),this.interact=t(this,"interact",7),this.renderHeading=()=>{if(!this.item.heading)return;const i=this.getAuthorLink(),t=this.translator.get(this.item.heading,{author:i});return e("limel-markdown",{class:"heading",value:t})},this.createMenuItem=i=>{var t,e;return"separator"in i?i:{value:i,text:null!==(t=i.label)&&void 0!==t?t:"",secondaryText:i.description,disabled:i.disabled,icon:null!==(e=i.icon)&&void 0!==e?e:""}},this.handleMenuItemSelect=i=>{var t;i.stopPropagation();const e=null===(t=i.detail.value)||void 0===t?void 0:t.command;e&&this.commandbus.handle(e)},this.handleNotificationListItemClick=()=>{this.interact.emit(this.item)}}render(){var i,t;let r;return r=this.item.clickable?this.handleNotificationListItemClick:void 0,e(o,{id:this.item.id,class:{"is-clickable":!!(null===(i=this.item)||void 0===i?void 0:i.clickable),"is-read":!!(null===(t=this.item)||void 0===t?void 0:t.read)},onClick:r},e("div",{class:"notification-item"},this.renderSource(),this.renderContent()))}renderSource(){return e("div",{class:"header"},this.renderIcon(),this.renderCaption(),this.renderTimestamp(),this.renderUnpromotedActionsMenu())}renderIcon(){var i,t,o,r;if(this.item.icon)return e("limel-icon",{class:"icon",badge:!0,name:null!==(t=null===(i=this.item.icon)||void 0===i?void 0:i.name)&&void 0!==t?t:"dot_circle",style:{color:`${null===(o=this.item.icon)||void 0===o?void 0:o.color}`,"background-color":`${null===(r=this.item.icon)||void 0===r?void 0:r.backgroundColor}`}})}renderContent(){return e("div",{class:"content"},e("div",{class:"body"},this.renderHeadline(),this.renderValue()),this.renderAuthorPicture())}renderHeadline(){if(this.item.heading||this.item.author)return e("div",{class:"headline"},this.renderHeading())}getAuthorLink(){if(!this.item.author)return;if("string"==typeof this.item.author.name)return this.item.author.name;const{href:i,text:t}=this.item.author.name;return`[${t}](${i})`}renderAuthorPicture(){var i;if(null===(i=this.item.author)||void 0===i?void 0:i.picture)return e("img",{class:"author-avatar",loading:"lazy",src:this.item.author.picture})}renderCaption(){if(this.item.caption)return e("h2",{class:"caption"},this.item.caption)}renderValue(){if(this.item.value)return e("limel-markdown",{class:"body-text",value:this.item.value})}renderUnpromotedActionsMenu(){var i,t;if(!(null===(i=this.item.unpromotedActions)||void 0===i?void 0:i.length))return;const o=this.item.unpromotedActions.map(this.createMenuItem);return e("limel-menu",{class:"unpromoted-actions-menu",items:o,openDirection:"bottom-end",onSelect:this.handleMenuItemSelect},e("limel-icon-button",{icon:"menu_2",slot:"trigger",label:null===(t=this.translator)||void 0===t?void 0:t.get("webclient.more-actions")}))}renderTimestamp(){const i=this.item.timestamp;if(i)return e("span",{class:"timestamp"},this.dateTimeFormatter.format(i,"timeofday"))}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){var i;return null===(i=this.platform)||void 0===i?void 0:i.get(r.Translate)}get commandbus(){var i;return null===(i=this.platform)||void 0===i?void 0:i.get(r.CommandBus)}};a.style='@charset "UTF-8";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid rgb(var(--contrast-500))}.notification-item:before{content:"";display:block;position:absolute;left:-1rem;top:0.85rem;border-radius:50%;height:0.5rem;width:0.5rem;transition:background-color 0.2s ease;background-color:var(--limebb-notification-item-unread-badge-color, transparent)}:host(limebb-notification-item.is-clickable) .notification-item{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:focus,:host(limebb-notification-item.is-clickable) .notification-item:focus-visible{will-change:color, background-color, box-shadow, transform}:host(limebb-notification-item.is-clickable) .notification-item:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limebb-notification-item.is-read) .notification-item{border-color:rgb(var(--contrast-600));background-color:rgb(var(--contrast-500))}:host(limebb-notification-item.is-clickable) .notification-item:hover{border-color:transparent}:host(limebb-notification-item:not(.is-read)) .notification-item{--limebb-notification-item-unread-badge-color:rgb(\n var(--color-red-default)\n );background-color:rgb(var(--contrast-100))}:host(limebb-notification-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-notification-item:hover) .body-text{opacity:1}.header{display:flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0 0 0.25rem;margin-bottom:0.25rem}.header:not(:has(.icon)){padding-left:0.75rem}.header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.caption,.timestamp{font-size:0.75rem}.caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;flex-grow:1;font-weight:600;color:rgb(var(--contrast-900))}.timestamp{flex-shrink:0;margin-left:auto;transition:color 0.4s ease, opacity 0.2s ease;color:rgb(var(--contrast-900))}.headline{display:flex;gap:0.25rem;align-items:center}.content{display:flex;min-width:0;gap:0.5rem;padding:0 0.75rem 0.5rem 0.75rem}.heading{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.5rem;font-size:0.875rem;--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.body{display:flex;flex-direction:column;gap:0.5rem}.body-text{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:3;max-height:4.25rem;transition:opacity 0.2s ease;opacity:0.7}.icon{--icon-background-color:var(--limebb-feed-background-color);flex-shrink:0;width:1.5rem;padding:0.125rem}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;margin-top:auto;margin-right:-0.25rem;margin-left:auto;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}';export{a as limebb_notification_item}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,c as e,h as i}from"./p-8e85017b.js";import{P as r}from"./p-3f4595a3.js";function n(t){return t.items.forEach((e=>{t.processedItems.push({type:"notification",item:e})})),t}function o(t){const e=[];let i=t.newItemIndicatorInserted;return t.processedItems.forEach((r=>{"notification"===r.type&&t.lastVisitedTimestamp&&!i&&new Date(r.item.timestamp)<=t.lastVisitedTimestamp&&t.hasUnseenNotifications&&(e.push({type:"newItemIndicator"}),i=!0),e.push(r)})),t.processedItems=e,t.newItemIndicatorInserted=i,t}function a(t){const e=[];let i=null,r=null;for(const n of t.processedItems)if("notification"===n.type){const o=new Date(n.item.timestamp),a=t.dateTimeFormatter.format(o,"date");a!==r&&(i&&e.push(i),i={type:"group",groupType:"dateGroup",heading:a,items:[]},r=a),i&&i.items.push(n)}else"newItemIndicator"===n.type&&(i?i.items.push(n):e.push(n));return i&&e.push(i),Object.assign(Object.assign({},t),{processedItems:e})}const s=class{constructor(i){t(this,i),this.itemClick=e(this,"itemClick",7),this.items=[],this.processedItems=[],this.handleItemClick=t=>{this.itemClick.emit(t.detail)}}handleItemsChange(){let t=null;var e,i,r,s;this.lastVisitedTimestamp&&(t="string"==typeof(s=this.lastVisitedTimestamp)?new Date(Date.parse(s)):new Date(s)),this.processedItems=(r={items:e=this.items,processedItems:[],lastVisitedTimestamp:i=t,dateTimeFormatter:this.dateTimeFormatter,newItemIndicatorInserted:!1,lastProcessedDate:null,hasUnseenNotifications:e.some((t=>i&&new Date(t.timestamp)>i))},[n,o,a].reduce(((t,e)=>e(t)),r)).processedItems}componentWillLoad(){this.handleItemsChange()}render(){return[this.renderSpinner(),this.renderNotificationItems()]}renderSpinner(){if(this.loading)return i("limel-spinner",{size:"small"})}renderNotificationItems(){return this.processedItems.map((t=>{switch(t.type){case"group":return this.renderGroup(t);case"newItemIndicator":return this.renderIndicator();default:return null}}))}renderGroup(t){return i("section",{class:"date-group"},i("a",{class:"date-heading"},t.heading),t.items.map((t=>"notification"===t.type?this.renderNotificationItem(t.item):"newItemIndicator"===t.type?this.renderIndicator():void 0)))}renderNotificationItem(t){return i("limebb-notification-item",{platform:this.platform,context:this.context,item:t,key:t.id,onInteract:this.handleItemClick})}renderIndicator(){return i("div",{class:"new-items-indicator"},i("hr",null),i("h3",null,this.translator.get("webclient.new")))}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){return this.platform.get(r.Translate)}static get watchers(){return{items:["handleItemsChange"]}}};s.style=':host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:
|
|
1
|
+
import{r as t,c as e,h as i}from"./p-8e85017b.js";import{P as r}from"./p-3f4595a3.js";function n(t){return t.items.forEach((e=>{t.processedItems.push({type:"notification",item:e})})),t}function o(t){const e=[];let i=t.newItemIndicatorInserted;return t.processedItems.forEach((r=>{"notification"===r.type&&t.lastVisitedTimestamp&&!i&&new Date(r.item.timestamp)<=t.lastVisitedTimestamp&&t.hasUnseenNotifications&&(e.push({type:"newItemIndicator"}),i=!0),e.push(r)})),t.processedItems=e,t.newItemIndicatorInserted=i,t}function a(t){const e=[];let i=null,r=null;for(const n of t.processedItems)if("notification"===n.type){const o=new Date(n.item.timestamp),a=t.dateTimeFormatter.format(o,"date");a!==r&&(i&&e.push(i),i={type:"group",groupType:"dateGroup",heading:a,items:[]},r=a),i&&i.items.push(n)}else"newItemIndicator"===n.type&&(i?i.items.push(n):e.push(n));return i&&e.push(i),Object.assign(Object.assign({},t),{processedItems:e})}const s=class{constructor(i){t(this,i),this.itemClick=e(this,"itemClick",7),this.items=[],this.processedItems=[],this.handleItemClick=t=>{this.itemClick.emit(t.detail)}}handleItemsChange(){let t=null;var e,i,r,s;this.lastVisitedTimestamp&&(t="string"==typeof(s=this.lastVisitedTimestamp)?new Date(Date.parse(s)):new Date(s)),this.processedItems=(r={items:e=this.items,processedItems:[],lastVisitedTimestamp:i=t,dateTimeFormatter:this.dateTimeFormatter,newItemIndicatorInserted:!1,lastProcessedDate:null,hasUnseenNotifications:e.some((t=>i&&new Date(t.timestamp)>i))},[n,o,a].reduce(((t,e)=>e(t)),r)).processedItems}componentWillLoad(){this.handleItemsChange()}render(){return[this.renderSpinner(),this.renderNotificationItems()]}renderSpinner(){if(this.loading)return i("limel-spinner",{size:"small"})}renderNotificationItems(){return this.processedItems.map((t=>{switch(t.type){case"group":return this.renderGroup(t);case"newItemIndicator":return this.renderIndicator();default:return null}}))}renderGroup(t){return i("section",{class:"date-group"},i("a",{class:"date-heading"},t.heading),t.items.map((t=>"notification"===t.type?this.renderNotificationItem(t.item):"newItemIndicator"===t.type?this.renderIndicator():void 0)))}renderNotificationItem(t){return i("limebb-notification-item",{platform:this.platform,context:this.context,item:t,key:t.id,onInteract:this.handleItemClick})}renderIndicator(){return i("div",{class:"new-items-indicator"},i("hr",null),i("h3",null,this.translator.get("webclient.new")))}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){return this.platform.get(r.Translate)}static get watchers(){return{items:["handleItemsChange"]}}};s.style=':host(limebb-notification-list){--limebb-notification-list-background-color:var(\n --notification-list-background-color,\n rgb(var(--contrast-300))\n );display:flex;flex-direction:column;gap:1rem;max-width:45rem;background-color:var(--limebb-notification-list-background-color);padding:0.5rem}limel-spinner{align-self:center;justify-self:center;margin:auto}.date-group{isolation:isolate;display:flex;flex-direction:column;gap:0.5rem}.date-heading{position:sticky;z-index:1;top:0.25rem;display:flex;border-radius:9rem;padding:0.25rem 0.5rem;margin:0;width:fit-content;font-size:0.75rem;line-height:1;color:rgb(var(--contrast-900));backdrop-filter:blur(0.5rem);-webkit-backdrop-filter:blur(0.5rem);transition:color 0.2s ease, border-color 0.4s ease}.date-heading:hover{color:rgb(var(--contrast-1000));border-color:rgb(var(--contrast-500))}.date-heading:hover:before{opacity:1}.date-heading:before{transition:opacity 0.2s ease;content:"";position:absolute;z-index:-1;inset:0;opacity:0.6;border-radius:inherit;background-color:var(--limebb-notification-list-background-color)}.new-items-indicator{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;margin:0.25rem 0}.new-items-indicator hr{border:none;position:absolute;width:100%;height:1px;background-color:rgb(var(--color-red-lighter))}.new-items-indicator h3{z-index:1;padding:0 0.5rem;border-radius:1rem;margin:0 1rem;font-size:small;line-height:0.75rem;text-transform:lowercase;color:rgb(var(--color-red-default));background-color:var(--limebb-notification-list-background-color)}';export{s as limebb_notification_list}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@limetech/lime-crm-building-blocks",
|
|
3
|
-
"version": "1.50.
|
|
3
|
+
"version": "1.50.2",
|
|
4
4
|
"description": "A home for shared components meant for use with Lime CRM",
|
|
5
5
|
"main": "dist/index.cjs.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@eslint/eslintrc": "^3.1.0",
|
|
45
45
|
"@eslint/js": "^9.14.0",
|
|
46
|
-
"@limetech/lime-elements": "^37.
|
|
46
|
+
"@limetech/lime-elements": "^37.66.1",
|
|
47
47
|
"@limetech/lime-web-components": "^5.38.1",
|
|
48
48
|
"@lundalogik/lime-icons8": "^2.30.1",
|
|
49
|
-
"@lundalogik/limeclient.js": "^1.
|
|
49
|
+
"@lundalogik/limeclient.js": "^1.70.3",
|
|
50
50
|
"@stencil/core": "<2.19.0",
|
|
51
51
|
"@stencil/sass": "^3.0.12",
|
|
52
52
|
"@types/jest": "^27.0.3",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as i,c as t,h as o,H as e}from"./p-8e85017b.js";import{P as r}from"./p-3f4595a3.js";const a=class{constructor(e){i(this,e),this.interact=t(this,"interact",7),this.renderHeading=()=>{if(!this.item.heading)return;const i=this.getAuthorLink(),t=this.translator.get(this.item.heading,{author:i});return o("limel-markdown",{class:"heading",value:t})},this.createMenuItem=i=>{var t,o;return"separator"in i?i:{value:i,text:null!==(t=i.label)&&void 0!==t?t:"",secondaryText:i.description,disabled:i.disabled,icon:null!==(o=i.icon)&&void 0!==o?o:""}},this.handleMenuItemSelect=i=>{var t;i.stopPropagation();const o=null===(t=i.detail.value)||void 0===t?void 0:t.command;o&&this.commandbus.handle(o)},this.handleNotificationListItemClick=()=>{this.interact.emit(this.item)}}render(){var i,t;let r;return r=this.item.clickable?this.handleNotificationListItemClick:void 0,o(e,{id:this.item.id,class:{"is-clickable":!!(null===(i=this.item)||void 0===i?void 0:i.clickable),"is-read":!!(null===(t=this.item)||void 0===t?void 0:t.read)},onClick:r},o("div",{class:"notification-item"},this.renderSource(),this.renderContent()))}renderSource(){return o("div",{class:"header"},this.renderIcon(),this.renderCaption(),this.renderTimestamp(),this.renderUnpromotedActionsMenu())}renderIcon(){var i,t,e,r;if(this.item.icon)return o("limel-icon",{class:"icon",badge:!0,name:null!==(t=null===(i=this.item.icon)||void 0===i?void 0:i.name)&&void 0!==t?t:"dot_circle",style:{color:`${null===(e=this.item.icon)||void 0===e?void 0:e.color}`,"background-color":`${null===(r=this.item.icon)||void 0===r?void 0:r.backgroundColor}`}})}renderContent(){return o("div",{class:"content"},o("div",{class:"body"},this.renderHeadline(),this.renderValue()),this.renderAuthorPicture())}renderHeadline(){if(this.item.heading||this.item.author)return o("div",{class:"headline"},this.renderHeading())}getAuthorLink(){if(!this.item.author)return;if("string"==typeof this.item.author.name)return this.item.author.name;const{href:i,text:t}=this.item.author.name;return`[${t}](${i})`}renderAuthorPicture(){var i;if(null===(i=this.item.author)||void 0===i?void 0:i.picture)return o("img",{class:"author-avatar",loading:"lazy",src:this.item.author.picture})}renderCaption(){if(this.item.caption)return o("h2",{class:"caption"},this.item.caption)}renderValue(){if(this.item.value)return o("limel-markdown",{class:"body-text",value:this.item.value})}renderUnpromotedActionsMenu(){var i,t;if(!(null===(i=this.item.unpromotedActions)||void 0===i?void 0:i.length))return;const e=this.item.unpromotedActions.map(this.createMenuItem);return o("limel-menu",{class:"unpromoted-actions-menu",items:e,openDirection:"bottom-end",onSelect:this.handleMenuItemSelect},o("limel-icon-button",{icon:"menu_2",slot:"trigger",label:null===(t=this.translator)||void 0===t?void 0:t.get("webclient.more-actions")}))}renderTimestamp(){const i=this.item.timestamp;if(i)return o("span",{class:"timestamp"},this.dateTimeFormatter.format(i,"timeofday"))}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){var i;return null===(i=this.platform)||void 0===i?void 0:i.get(r.Translate)}get commandbus(){var i;return null===(i=this.platform)||void 0===i?void 0:i.get(r.CommandBus)}};a.style='@charset "UTF-8";*{box-sizing:border-box}:host(limebb-notification-item){isolation:isolate;padding:0 0.5rem}.notification-item{position:relative;box-sizing:border-box;display:flex;flex-direction:column;gap:0.25rem;border-radius:0.75rem;border:1px solid transparent}.notification-item:before{content:"";display:block;position:absolute;left:-1rem;top:0.85rem;border-radius:50%;height:0.5rem;width:0.5rem;transition:background-color 0.2s ease;background-color:var(--limebb-notification-item-unread-badge-color, transparent)}:host(limebb-notification-item.is-clickable) .notification-item{transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--mdc-theme-on-surface);background-color:transparent}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:focus,:host(limebb-notification-item.is-clickable) .notification-item:focus-visible{will-change:color, background-color, box-shadow, transform}:host(limebb-notification-item.is-clickable) .notification-item:hover{transform:translate3d(0, 0.01rem, 0);color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transform-timing-function:cubic-bezier(\n 0.83,\n -0.15,\n 0.49,\n 1.16\n );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}:host(limebb-notification-item.is-clickable) .notification-item:hover,:host(limebb-notification-item.is-clickable) .notification-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}:host(limebb-notification-item.is-read) .notification-item{--limebb-notification-header-border-color:rgb(var(--contrast-600));border-color:rgb(var(--contrast-400));background-color:rgb(var(--contrast-400))}:host(limebb-notification-item.is-read.is-clickable) .notification-item:hover{border-color:transparent}:host(limebb-notification-item:not(.is-read)) .notification-item{--limebb-notification-header-border-color:rgb(var(--contrast-400));--limebb-notification-item-unread-badge-color:rgb(\n var(--color-red-default)\n );background-color:rgb(var(--contrast-100))}:host(limebb-notification-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-notification-item:hover) .body-text{opacity:1}.header{display:flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0 0 0.25rem;margin-bottom:0.25rem;border-bottom:1px solid var(--limebb-notification-header-border-color)}.header:not(:has(.icon)){padding-left:0.75rem}.header:not(:has(.unpromoted-actions-menu)){padding-right:0.5rem}.caption,.timestamp{font-size:0.75rem}.caption{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin:0;flex-grow:1;font-weight:600;color:rgb(var(--contrast-900))}.timestamp{flex-shrink:0;margin-left:auto;transition:color 0.4s ease, opacity 0.2s ease;color:rgb(var(--contrast-800))}.headline{display:flex;gap:0.25rem;align-items:center}.content{display:flex;min-width:0;gap:0.5rem;padding:0 0.75rem 0.5rem 0.75rem}.heading{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2rem;font-size:0.875rem;--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.body{display:flex;flex-direction:column;gap:0.5rem}.body-text{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:4;max-height:4.25rem;transition:opacity 0.2s ease;opacity:0.7}.icon{--icon-background-color:var(--limebb-feed-background-color);flex-shrink:0;width:1.5rem;padding:0.125rem}.author-avatar{border-radius:50%;width:2rem;height:2rem;object-fit:cover;margin-top:auto;margin-right:-0.25rem;margin-left:auto;box-shadow:0 0 0 1px rgb(var(--contrast-600))}.author{font-weight:bold;text-decoration:none;white-space:nowrap}a.author{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary)}a.author:before{transition:opacity 0.2s ease, transform 0.3s ease-out;content:"";position:absolute;inset:auto 0 0 0;width:calc(100% - 0.5rem);margin:auto;height:0.125rem;border-radius:1rem;background-color:currentColor;opacity:0;transform:scale(0.6)}a.author:hover{color:rgb(var(--color-teal-light))}a.author:hover:before{opacity:0.3;transform:scale(1)}limel-chip-set{--button-shadow-normal:none;margin-left:-1rem;margin-bottom:-0.5rem}';export{a as limebb_notification_item}
|