@limetech/lime-crm-building-blocks 1.58.1 → 1.60.0

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 CHANGED
@@ -1,3 +1,21 @@
1
+ ## [1.60.0](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.59.0...v1.60.0) (2025-01-15)
2
+
3
+ ### Features
4
+
5
+
6
+ * **kanban-item:** add assignees property ([07cb50e](https://github.com/Lundalogik/lime-crm-building-blocks/commit/07cb50eb8277303db48bfa5ed591412807c678ea))
7
+ ### Bug Fixes
8
+
9
+
10
+ * **kanban:** make items focusable via keyboard ([f72f4e0](https://github.com/Lundalogik/lime-crm-building-blocks/commit/f72f4e04bd722f10301b6281edd2811c88c1031f))
11
+
12
+ ## [1.59.0](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.58.1...v1.59.0) (2025-01-15)
13
+
14
+ ### Features
15
+
16
+
17
+ * **kanban-column:** item indicator ([da9482d](https://github.com/Lundalogik/lime-crm-building-blocks/commit/da9482d1c5b987047c13663349e1bb26720f4cc7))
18
+
1
19
  ## [1.58.1](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.58.0...v1.58.1) (2025-01-10)
2
20
 
3
21
  ### Bug Fixes
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-f1d0f3b9.js');
6
6
  const types = require('./types-d3b90b2e.js');
7
7
 
8
- const kanbanColumnCss = "@charset \"UTF-8\";:host(limebb-kanban-column){--header-top-right-left-border-radius:0.5rem;scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem;background-color:rgb(var(--contrast-500))}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--contrast-300))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}limel-header{flex-shrink:0}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}";
8
+ const kanbanColumnCss = "@charset \"UTF-8\";:host(limebb-kanban-column){background-color:rgb(var(--limebb-kanban-column-grouped-background));--header-top-right-left-border-radius:0.5rem;--limebb-kanban-column-ungrouped-background:var(--contrast-300);--limebb-kanban-column-grouped-background:var(--contrast-500);scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}:host(limebb-kanban-column.ungrouped-column) limel-header{background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}limel-header{flex-shrink:0;width:auto;background-color:rgb(var(--limebb-kanban-column-grouped-background))}limel-badge{--badge-background-color:rgb(var(--contrast-200))}.column-heading{display:flex}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-kanban-item:focus{outline:none}limebb-kanban-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}";
9
9
  const LimebbKanbanColumnStyle0 = kanbanColumnCss;
10
10
 
11
11
  const KanbanColumn = class {
@@ -38,7 +38,12 @@ const KanbanColumn = class {
38
38
  ];
39
39
  }
40
40
  renderColumnHeading() {
41
- return index.h("limel-header", { heading: this.columnHeading });
41
+ return (index.h("div", { class: "column-heading" }, index.h("limel-header", { heading: this.columnHeading }), this.renderItemNumber()));
42
+ }
43
+ renderItemNumber() {
44
+ if (this.items.length > 0) {
45
+ return index.h("limel-badge", { label: this.items.length });
46
+ }
42
47
  }
43
48
  renderSpinner() {
44
49
  if (this.loading) {
@@ -47,7 +52,7 @@ const KanbanColumn = class {
47
52
  }
48
53
  renderKanbanItems() {
49
54
  return this.items.slice(0, this.displayedItemCount).map((item) => {
50
- return (index.h("limebb-kanban-item", { platform: this.platform, context: this.context, item: item, key: item.id }));
55
+ return (index.h("limebb-kanban-item", { tabindex: 0, platform: this.platform, context: this.context, item: item, key: item.id }));
51
56
  });
52
57
  }
53
58
  renderLoadMore() {
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-f1d0f3b9.js');
6
6
  const types = require('./types-d3b90b2e.js');
7
7
 
8
- const kanbanItemCss = "@charset \"UTF-8\";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header .icon{flex-shrink:0;width:1.25rem}.header img{border-radius:50%;width:1.25rem;height:1.25rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:\"\";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}";
8
+ const kanbanItemCss = "@charset \"UTF-8\";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:\"\";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.header img,.header limel-icon,.footer img,.footer limel-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.header img,.footer img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}.assignees{margin-right:-0.25rem;display:flex;align-items:center;gap:0.25rem}.assignees:has(>:nth-child(2)) span{display:none}.assignees:has(>:nth-child(2)) img,.assignees:has(>:nth-child(2)) limel-icon{margin-left:-0.5rem}.assignees:hover img,.assignees:hover limel-icon,.assignees:focus-within img,.assignees:focus-within limel-icon{margin-left:0rem}.assignees:hover .assignee:not(:hover):not(:focus-visible) img,.assignees:hover .assignee:not(:hover):not(:focus-visible) limel-icon,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) img,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) limel-icon{filter:grayscale(1);opacity:0.6}.assignee{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;display:flex;align-items:center;text-decoration:none;gap:0.25rem;margin-left:0;border-radius:1rem}.assignee:hover,.assignee:focus,.assignee:focus-visible{will-change:color, background-color, box-shadow, transform}.assignee: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)}.assignee: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)}.assignee:hover,.assignee:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.assignee:focus{outline:none}.assignee:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.assignee limel-icon,.assignee img{transition:margin 0.2s ease, opacity 0.2s ease, filter 0.2s ease}.assignee limel-icon{padding:0.125rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);background-color:rgb(var(--contrast-100))}.assignee span{font-size:0.75rem;color:rgb(var(--contrast-900));padding-right:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
9
9
  const LimebbKanbanItemStyle0 = kanbanItemCss;
10
10
 
11
11
  const KanbanItemComponent = class {
@@ -19,6 +19,15 @@ const KanbanItemComponent = class {
19
19
  }
20
20
  return index.h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
21
21
  };
22
+ this.renderAssigneesAvatar = (assignee) => {
23
+ if (!assignee.picture) {
24
+ return (index.h("limel-icon", { name: assignee.icon.name, style: {
25
+ color: `${assignee.icon.color}`,
26
+ 'background-color': `${assignee.icon.backgroundColor}`,
27
+ } }));
28
+ }
29
+ return (index.h("img", { loading: "lazy", src: assignee.picture, alt: assignee.text }));
30
+ };
22
31
  this.createMenuItem = (action) => {
23
32
  var _a, _b;
24
33
  if ('separator' in action) {
@@ -117,7 +126,14 @@ const KanbanItemComponent = class {
117
126
  return (index.h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, index.h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions') })));
118
127
  }
119
128
  renderFooter() {
120
- return index.h("div", { class: "footer" }, this.renderTimestamp());
129
+ return (index.h("div", { class: "footer" }, this.renderTimestamp(), this.renderAssignees()));
130
+ }
131
+ renderAssignees() {
132
+ var _a;
133
+ if (!((_a = this.item.assignees) === null || _a === void 0 ? void 0 : _a.length)) {
134
+ return;
135
+ }
136
+ return (index.h("div", { class: "assignees" }, this.item.assignees.map((assignee) => (index.h("a", { class: "assignee", href: assignee.name.href, title: assignee.name.text }, this.renderAssigneesAvatar(assignee), index.h("span", null, assignee.name.text))))));
121
137
  }
122
138
  renderTimestamp() {
123
139
  const timestamp = this.item.timestamp;
@@ -58,26 +58,41 @@
58
58
  * after a certain number of lines.
59
59
  */
60
60
  :host(limebb-kanban-column) {
61
+ background-color: rgb(var(--limebb-kanban-column-grouped-background));
61
62
  --header-top-right-left-border-radius: 0.5rem;
63
+ --limebb-kanban-column-ungrouped-background: var(--contrast-300);
64
+ --limebb-kanban-column-grouped-background: var(--contrast-500);
62
65
  scroll-snap-align: start;
63
66
  box-sizing: border-box;
64
67
  display: flex;
65
68
  flex-direction: column;
66
69
  border-radius: 0.5rem;
67
70
  min-width: 20rem;
68
- background-color: rgb(var(--contrast-500));
69
71
  }
70
72
 
71
73
  :host(limebb-kanban-column.ungrouped-column) {
72
74
  border: 1px dashed rgb(var(--contrast-700));
73
- background-color: rgb(var(--contrast-300));
75
+ background-color: rgb(var(--limebb-kanban-column-ungrouped-background));
74
76
  }
75
77
  :host(limebb-kanban-column.ungrouped-column) limebb-kanban-item {
76
78
  border: 1px dashed rgb(var(--contrast-700));
77
79
  }
80
+ :host(limebb-kanban-column.ungrouped-column) limel-header {
81
+ background-color: rgb(var(--limebb-kanban-column-ungrouped-background));
82
+ }
78
83
 
79
84
  limel-header {
80
85
  flex-shrink: 0;
86
+ width: auto;
87
+ background-color: rgb(var(--limebb-kanban-column-grouped-background));
88
+ }
89
+
90
+ limel-badge {
91
+ --badge-background-color: rgb(var(--contrast-200));
92
+ }
93
+
94
+ .column-heading {
95
+ display: flex;
81
96
  }
82
97
 
83
98
  .items {
@@ -118,4 +133,11 @@ limebb-kanban-item:active {
118
133
  limebb-kanban-item:hover, limebb-kanban-item:active {
119
134
  --limel-clickable-transition-speed: 0.2s;
120
135
  --limel-clickable-transform-speed: 0.16s;
136
+ }
137
+ limebb-kanban-item:focus {
138
+ outline: none;
139
+ }
140
+ limebb-kanban-item:focus-visible {
141
+ outline: none;
142
+ box-shadow: var(--shadow-depth-8-focused);
121
143
  }
@@ -33,7 +33,12 @@ export class KanbanColumn {
33
33
  ];
34
34
  }
35
35
  renderColumnHeading() {
36
- return h("limel-header", { heading: this.columnHeading });
36
+ return (h("div", { class: "column-heading" }, h("limel-header", { heading: this.columnHeading }), this.renderItemNumber()));
37
+ }
38
+ renderItemNumber() {
39
+ if (this.items.length > 0) {
40
+ return h("limel-badge", { label: this.items.length });
41
+ }
37
42
  }
38
43
  renderSpinner() {
39
44
  if (this.loading) {
@@ -42,7 +47,7 @@ export class KanbanColumn {
42
47
  }
43
48
  renderKanbanItems() {
44
49
  return this.items.slice(0, this.displayedItemCount).map((item) => {
45
- return (h("limebb-kanban-item", { platform: this.platform, context: this.context, item: item, key: item.id }));
50
+ return (h("limebb-kanban-item", { tabindex: 0, platform: this.platform, context: this.context, item: item, key: item.id }));
46
51
  });
47
52
  }
48
53
  renderLoadMore() {
@@ -72,17 +72,6 @@
72
72
  border-radius: 0.5rem 0.5rem 0 0;
73
73
  background-color: rgb(var(--contrast-200));
74
74
  }
75
- .header .icon {
76
- flex-shrink: 0;
77
- width: 1.25rem;
78
- }
79
- .header img {
80
- border-radius: 50%;
81
- width: 1.25rem;
82
- height: 1.25rem;
83
- object-fit: cover;
84
- box-shadow: 0 0 0 1px rgb(var(--contrast-800));
85
- }
86
75
  .header a {
87
76
  position: relative;
88
77
  cursor: pointer;
@@ -133,7 +122,8 @@ limel-chip-set {
133
122
  position: relative;
134
123
  display: flex;
135
124
  align-items: center;
136
- justify-content: flex-end;
125
+ justify-content: space-between;
126
+ gap: 0.5rem;
137
127
  padding: 0.25rem 0.5rem;
138
128
  border-top: 1px dashed rgb(var(--contrast-300));
139
129
  }
@@ -149,7 +139,107 @@ limel-chip-set {
149
139
  background-color: var(--color-code);
150
140
  }
151
141
 
142
+ .header img,
143
+ .header limel-icon,
144
+ .footer img,
145
+ .footer limel-icon {
146
+ flex-shrink: 0;
147
+ width: 1.25rem;
148
+ height: 1.25rem;
149
+ }
150
+ .header img,
151
+ .footer img {
152
+ border-radius: 50%;
153
+ object-fit: cover;
154
+ box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.4);
155
+ }
156
+
152
157
  .timestamp {
153
158
  font-size: 0.75rem;
154
159
  color: rgb(var(--contrast-800));
160
+ }
161
+
162
+ .assignees {
163
+ margin-right: -0.25rem;
164
+ display: flex;
165
+ align-items: center;
166
+ gap: 0.25rem;
167
+ }
168
+ .assignees:has(> :nth-child(2)) span {
169
+ display: none;
170
+ }
171
+ .assignees:has(> :nth-child(2)) img,
172
+ .assignees:has(> :nth-child(2)) limel-icon {
173
+ margin-left: -0.5rem;
174
+ }
175
+ .assignees:hover img,
176
+ .assignees:hover limel-icon, .assignees:focus-within img,
177
+ .assignees:focus-within limel-icon {
178
+ margin-left: 0rem;
179
+ }
180
+ .assignees:hover .assignee:not(:hover):not(:focus-visible) img,
181
+ .assignees:hover .assignee:not(:hover):not(:focus-visible) limel-icon, .assignees:focus-within .assignee:not(:hover):not(:focus-visible) img,
182
+ .assignees:focus-within .assignee:not(:hover):not(:focus-visible) limel-icon {
183
+ filter: grayscale(1);
184
+ opacity: 0.6;
185
+ }
186
+
187
+ .assignee {
188
+ 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);
189
+ cursor: pointer;
190
+ color: var(--mdc-theme-on-surface);
191
+ background-color: transparent;
192
+ display: flex;
193
+ align-items: center;
194
+ text-decoration: none;
195
+ gap: 0.25rem;
196
+ margin-left: 0;
197
+ border-radius: 1rem;
198
+ }
199
+ .assignee:hover, .assignee:focus, .assignee:focus-visible {
200
+ will-change: color, background-color, box-shadow, transform;
201
+ }
202
+ .assignee:hover {
203
+ transform: translate3d(0, 0.01rem, 0);
204
+ color: var(--mdc-theme-on-surface);
205
+ background-color: var(--lime-elevated-surface-background-color);
206
+ box-shadow: var(--button-shadow-hovered);
207
+ }
208
+ .assignee:active {
209
+ --limel-clickable-transform-timing-function: cubic-bezier(
210
+ 0.83,
211
+ -0.15,
212
+ 0.49,
213
+ 1.16
214
+ );
215
+ transform: translate3d(0, 0.05rem, 0);
216
+ box-shadow: var(--button-shadow-pressed);
217
+ }
218
+ .assignee:hover, .assignee:active {
219
+ --limel-clickable-transition-speed: 0.2s;
220
+ --limel-clickable-transform-speed: 0.16s;
221
+ }
222
+ .assignee:focus {
223
+ outline: none;
224
+ }
225
+ .assignee:focus-visible {
226
+ outline: none;
227
+ box-shadow: var(--shadow-depth-8-focused);
228
+ }
229
+ .assignee limel-icon,
230
+ .assignee img {
231
+ transition: margin 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
232
+ }
233
+ .assignee limel-icon {
234
+ padding: 0.125rem;
235
+ box-shadow: 0 0 0 1px rgb(var(--contrast-800), 0.4);
236
+ background-color: rgb(var(--contrast-100));
237
+ }
238
+ .assignee span {
239
+ font-size: 0.75rem;
240
+ color: rgb(var(--contrast-900));
241
+ padding-right: 0.5rem;
242
+ overflow: hidden;
243
+ white-space: nowrap;
244
+ text-overflow: ellipsis;
155
245
  }
@@ -14,6 +14,15 @@ export class KanbanItemComponent {
14
14
  }
15
15
  return h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
16
16
  };
17
+ this.renderAssigneesAvatar = (assignee) => {
18
+ if (!assignee.picture) {
19
+ return (h("limel-icon", { name: assignee.icon.name, style: {
20
+ color: `${assignee.icon.color}`,
21
+ 'background-color': `${assignee.icon.backgroundColor}`,
22
+ } }));
23
+ }
24
+ return (h("img", { loading: "lazy", src: assignee.picture, alt: assignee.text }));
25
+ };
17
26
  this.createMenuItem = (action) => {
18
27
  var _a, _b;
19
28
  if ('separator' in action) {
@@ -112,7 +121,14 @@ export class KanbanItemComponent {
112
121
  return (h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions') })));
113
122
  }
114
123
  renderFooter() {
115
- return h("div", { class: "footer" }, this.renderTimestamp());
124
+ return (h("div", { class: "footer" }, this.renderTimestamp(), this.renderAssignees()));
125
+ }
126
+ renderAssignees() {
127
+ var _a;
128
+ if (!((_a = this.item.assignees) === null || _a === void 0 ? void 0 : _a.length)) {
129
+ return;
130
+ }
131
+ return (h("div", { class: "assignees" }, this.item.assignees.map((assignee) => (h("a", { class: "assignee", href: assignee.name.href, title: assignee.name.text }, this.renderAssigneesAvatar(assignee), h("span", null, assignee.name.text))))));
116
132
  }
117
133
  renderTimestamp() {
118
134
  const timestamp = this.item.timestamp;
@@ -8,6 +8,7 @@ import { h } from "@stencil/core";
8
8
  * work-in-progress, and identify bottlenecks.
9
9
  *
10
10
  * @exampleComponent limebb-example-kanban-basic
11
+ * @exampleComponent limebb-example-kanban-assignees
11
12
  * @exampleComponent limebb-example-kanban-color-coding
12
13
  * @exampleComponent limebb-example-kanban-unpromoted-actions
13
14
  * @private
@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/i
2
2
  import { P as PlatformServiceName } from './types.js';
3
3
  import { d as defineCustomElement$1 } from './kanban-item.js';
4
4
 
5
- const kanbanColumnCss = "@charset \"UTF-8\";:host(limebb-kanban-column){--header-top-right-left-border-radius:0.5rem;scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem;background-color:rgb(var(--contrast-500))}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--contrast-300))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}limel-header{flex-shrink:0}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}";
5
+ const kanbanColumnCss = "@charset \"UTF-8\";:host(limebb-kanban-column){background-color:rgb(var(--limebb-kanban-column-grouped-background));--header-top-right-left-border-radius:0.5rem;--limebb-kanban-column-ungrouped-background:var(--contrast-300);--limebb-kanban-column-grouped-background:var(--contrast-500);scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}:host(limebb-kanban-column.ungrouped-column) limel-header{background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}limel-header{flex-shrink:0;width:auto;background-color:rgb(var(--limebb-kanban-column-grouped-background))}limel-badge{--badge-background-color:rgb(var(--contrast-200))}.column-heading{display:flex}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-kanban-item:focus{outline:none}limebb-kanban-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}";
6
6
  const LimebbKanbanColumnStyle0 = kanbanColumnCss;
7
7
 
8
8
  const KanbanColumn = /*@__PURE__*/ proxyCustomElement(class KanbanColumn extends HTMLElement {
@@ -37,7 +37,12 @@ const KanbanColumn = /*@__PURE__*/ proxyCustomElement(class KanbanColumn extends
37
37
  ];
38
38
  }
39
39
  renderColumnHeading() {
40
- return h("limel-header", { heading: this.columnHeading });
40
+ return (h("div", { class: "column-heading" }, h("limel-header", { heading: this.columnHeading }), this.renderItemNumber()));
41
+ }
42
+ renderItemNumber() {
43
+ if (this.items.length > 0) {
44
+ return h("limel-badge", { label: this.items.length });
45
+ }
41
46
  }
42
47
  renderSpinner() {
43
48
  if (this.loading) {
@@ -46,7 +51,7 @@ const KanbanColumn = /*@__PURE__*/ proxyCustomElement(class KanbanColumn extends
46
51
  }
47
52
  renderKanbanItems() {
48
53
  return this.items.slice(0, this.displayedItemCount).map((item) => {
49
- return (h("limebb-kanban-item", { platform: this.platform, context: this.context, item: item, key: item.id }));
54
+ return (h("limebb-kanban-item", { tabindex: 0, platform: this.platform, context: this.context, item: item, key: item.id }));
50
55
  });
51
56
  }
52
57
  renderLoadMore() {
@@ -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 kanbanItemCss = "@charset \"UTF-8\";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header .icon{flex-shrink:0;width:1.25rem}.header img{border-radius:50%;width:1.25rem;height:1.25rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:\"\";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}";
4
+ const kanbanItemCss = "@charset \"UTF-8\";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:\"\";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.header img,.header limel-icon,.footer img,.footer limel-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.header img,.footer img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}.assignees{margin-right:-0.25rem;display:flex;align-items:center;gap:0.25rem}.assignees:has(>:nth-child(2)) span{display:none}.assignees:has(>:nth-child(2)) img,.assignees:has(>:nth-child(2)) limel-icon{margin-left:-0.5rem}.assignees:hover img,.assignees:hover limel-icon,.assignees:focus-within img,.assignees:focus-within limel-icon{margin-left:0rem}.assignees:hover .assignee:not(:hover):not(:focus-visible) img,.assignees:hover .assignee:not(:hover):not(:focus-visible) limel-icon,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) img,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) limel-icon{filter:grayscale(1);opacity:0.6}.assignee{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;display:flex;align-items:center;text-decoration:none;gap:0.25rem;margin-left:0;border-radius:1rem}.assignee:hover,.assignee:focus,.assignee:focus-visible{will-change:color, background-color, box-shadow, transform}.assignee: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)}.assignee: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)}.assignee:hover,.assignee:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.assignee:focus{outline:none}.assignee:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.assignee limel-icon,.assignee img{transition:margin 0.2s ease, opacity 0.2s ease, filter 0.2s ease}.assignee limel-icon{padding:0.125rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);background-color:rgb(var(--contrast-100))}.assignee span{font-size:0.75rem;color:rgb(var(--contrast-900));padding-right:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
5
5
  const LimebbKanbanItemStyle0 = kanbanItemCss;
6
6
 
7
7
  const KanbanItemComponent = /*@__PURE__*/ proxyCustomElement(class KanbanItemComponent extends HTMLElement {
@@ -17,6 +17,15 @@ const KanbanItemComponent = /*@__PURE__*/ proxyCustomElement(class KanbanItemCom
17
17
  }
18
18
  return h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
19
19
  };
20
+ this.renderAssigneesAvatar = (assignee) => {
21
+ if (!assignee.picture) {
22
+ return (h("limel-icon", { name: assignee.icon.name, style: {
23
+ color: `${assignee.icon.color}`,
24
+ 'background-color': `${assignee.icon.backgroundColor}`,
25
+ } }));
26
+ }
27
+ return (h("img", { loading: "lazy", src: assignee.picture, alt: assignee.text }));
28
+ };
20
29
  this.createMenuItem = (action) => {
21
30
  var _a, _b;
22
31
  if ('separator' in action) {
@@ -115,7 +124,14 @@ const KanbanItemComponent = /*@__PURE__*/ proxyCustomElement(class KanbanItemCom
115
124
  return (h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions') })));
116
125
  }
117
126
  renderFooter() {
118
- return h("div", { class: "footer" }, this.renderTimestamp());
127
+ return (h("div", { class: "footer" }, this.renderTimestamp(), this.renderAssignees()));
128
+ }
129
+ renderAssignees() {
130
+ var _a;
131
+ if (!((_a = this.item.assignees) === null || _a === void 0 ? void 0 : _a.length)) {
132
+ return;
133
+ }
134
+ return (h("div", { class: "assignees" }, this.item.assignees.map((assignee) => (h("a", { class: "assignee", href: assignee.name.href, title: assignee.name.text }, this.renderAssigneesAvatar(assignee), h("span", null, assignee.name.text))))));
119
135
  }
120
136
  renderTimestamp() {
121
137
  const timestamp = this.item.timestamp;
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h } from './index-85cc02f7.js';
2
2
  import { P as PlatformServiceName } from './types-b0ae3943.js';
3
3
 
4
- const kanbanColumnCss = "@charset \"UTF-8\";:host(limebb-kanban-column){--header-top-right-left-border-radius:0.5rem;scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem;background-color:rgb(var(--contrast-500))}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--contrast-300))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}limel-header{flex-shrink:0}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}";
4
+ const kanbanColumnCss = "@charset \"UTF-8\";:host(limebb-kanban-column){background-color:rgb(var(--limebb-kanban-column-grouped-background));--header-top-right-left-border-radius:0.5rem;--limebb-kanban-column-ungrouped-background:var(--contrast-300);--limebb-kanban-column-grouped-background:var(--contrast-500);scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}:host(limebb-kanban-column.ungrouped-column) limel-header{background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}limel-header{flex-shrink:0;width:auto;background-color:rgb(var(--limebb-kanban-column-grouped-background))}limel-badge{--badge-background-color:rgb(var(--contrast-200))}.column-heading{display:flex}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-kanban-item:focus{outline:none}limebb-kanban-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}";
5
5
  const LimebbKanbanColumnStyle0 = kanbanColumnCss;
6
6
 
7
7
  const KanbanColumn = class {
@@ -34,7 +34,12 @@ const KanbanColumn = class {
34
34
  ];
35
35
  }
36
36
  renderColumnHeading() {
37
- return h("limel-header", { heading: this.columnHeading });
37
+ return (h("div", { class: "column-heading" }, h("limel-header", { heading: this.columnHeading }), this.renderItemNumber()));
38
+ }
39
+ renderItemNumber() {
40
+ if (this.items.length > 0) {
41
+ return h("limel-badge", { label: this.items.length });
42
+ }
38
43
  }
39
44
  renderSpinner() {
40
45
  if (this.loading) {
@@ -43,7 +48,7 @@ const KanbanColumn = class {
43
48
  }
44
49
  renderKanbanItems() {
45
50
  return this.items.slice(0, this.displayedItemCount).map((item) => {
46
- return (h("limebb-kanban-item", { platform: this.platform, context: this.context, item: item, key: item.id }));
51
+ return (h("limebb-kanban-item", { tabindex: 0, platform: this.platform, context: this.context, item: item, key: item.id }));
47
52
  });
48
53
  }
49
54
  renderLoadMore() {
@@ -1,7 +1,7 @@
1
1
  import { r as registerInstance, c as createEvent, h, H as Host } from './index-85cc02f7.js';
2
2
  import { P as PlatformServiceName } from './types-b0ae3943.js';
3
3
 
4
- const kanbanItemCss = "@charset \"UTF-8\";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header .icon{flex-shrink:0;width:1.25rem}.header img{border-radius:50%;width:1.25rem;height:1.25rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:\"\";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}";
4
+ const kanbanItemCss = "@charset \"UTF-8\";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:\"\";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.header img,.header limel-icon,.footer img,.footer limel-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.header img,.footer img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}.assignees{margin-right:-0.25rem;display:flex;align-items:center;gap:0.25rem}.assignees:has(>:nth-child(2)) span{display:none}.assignees:has(>:nth-child(2)) img,.assignees:has(>:nth-child(2)) limel-icon{margin-left:-0.5rem}.assignees:hover img,.assignees:hover limel-icon,.assignees:focus-within img,.assignees:focus-within limel-icon{margin-left:0rem}.assignees:hover .assignee:not(:hover):not(:focus-visible) img,.assignees:hover .assignee:not(:hover):not(:focus-visible) limel-icon,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) img,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) limel-icon{filter:grayscale(1);opacity:0.6}.assignee{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;display:flex;align-items:center;text-decoration:none;gap:0.25rem;margin-left:0;border-radius:1rem}.assignee:hover,.assignee:focus,.assignee:focus-visible{will-change:color, background-color, box-shadow, transform}.assignee: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)}.assignee: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)}.assignee:hover,.assignee:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.assignee:focus{outline:none}.assignee:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.assignee limel-icon,.assignee img{transition:margin 0.2s ease, opacity 0.2s ease, filter 0.2s ease}.assignee limel-icon{padding:0.125rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);background-color:rgb(var(--contrast-100))}.assignee span{font-size:0.75rem;color:rgb(var(--contrast-900));padding-right:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";
5
5
  const LimebbKanbanItemStyle0 = kanbanItemCss;
6
6
 
7
7
  const KanbanItemComponent = class {
@@ -15,6 +15,15 @@ const KanbanItemComponent = class {
15
15
  }
16
16
  return h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
17
17
  };
18
+ this.renderAssigneesAvatar = (assignee) => {
19
+ if (!assignee.picture) {
20
+ return (h("limel-icon", { name: assignee.icon.name, style: {
21
+ color: `${assignee.icon.color}`,
22
+ 'background-color': `${assignee.icon.backgroundColor}`,
23
+ } }));
24
+ }
25
+ return (h("img", { loading: "lazy", src: assignee.picture, alt: assignee.text }));
26
+ };
18
27
  this.createMenuItem = (action) => {
19
28
  var _a, _b;
20
29
  if ('separator' in action) {
@@ -113,7 +122,14 @@ const KanbanItemComponent = class {
113
122
  return (h("limel-menu", { class: "unpromoted-actions-menu", items: items, openDirection: "bottom-end", onSelect: this.handleMenuItemSelect }, h("limel-icon-button", { icon: "menu_2", slot: "trigger", label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.more-actions') })));
114
123
  }
115
124
  renderFooter() {
116
- return h("div", { class: "footer" }, this.renderTimestamp());
125
+ return (h("div", { class: "footer" }, this.renderTimestamp(), this.renderAssignees()));
126
+ }
127
+ renderAssignees() {
128
+ var _a;
129
+ if (!((_a = this.item.assignees) === null || _a === void 0 ? void 0 : _a.length)) {
130
+ return;
131
+ }
132
+ return (h("div", { class: "assignees" }, this.item.assignees.map((assignee) => (h("a", { class: "assignee", href: assignee.name.href, title: assignee.name.text }, this.renderAssigneesAvatar(assignee), h("span", null, assignee.name.text))))));
117
133
  }
118
134
  renderTimestamp() {
119
135
  const timestamp = this.item.timestamp;
@@ -1 +1 @@
1
- import{p as e,b as t}from"./p-4b59a4d3.js";export{s as setNonce}from"./p-4b59a4d3.js";import{g as i}from"./p-e1255160.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((async e=>(await i(),t([["p-d67292c1",[[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-13e46b27",[[1,"limebb-kanban",{platform:[16],context:[16],items:[16],paginationSize:[2,"pagination-size"],groupBy:[513,"group-by"],groups:[16]}]]],["p-7e1fc88a",[[1,"limebb-text-editor",{platform:[16],context:[16],allowMentioning:[4,"allow-mentioning"],contentType:[1,"content-type"],language:[513],disabled:[516],readonly:[516],helperText:[513,"helper-text"],placeholder:[513],label:[513],invalid:[516],required:[516],selectedContext:[16],ui:[513],allowResize:[4,"allow-resize"],value:[1],items:[32],highlightedItemIndex:[32],customElements:[32],registeredTriggers:[32],editorPickerQuery:[32],searchableLimetypes:[32],isPickerOpen:[32],isSearching:[32]},null,{isPickerOpen:["watchOpen"],editorPickerQuery:["watchQuery"]}]]],["p-97ae646a",[[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-27e63f43",[[1,"limebb-info-tile-currency-format",{platform:[16],context:[16],value:[16]}]]],["p-6e84a2c4",[[1,"limebb-notification-list",{platform:[16],context:[16],items:[16],loading:[4],lastVisitedTimestamp:[1,"last-visited-timestamp"]},null,{items:["handleItemsChange"]}]]],["p-d30c8d5e",[[17,"limebb-browser",{platform:[16],context:[16],items:[16],layout:[1],filter:[32]}]]],["p-74e9d1a5",[[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]},null,{formInfo:["watchFormInfo"],configComponent:["watchconfigComponent"]}]]],["p-08da613f",[[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-3665678c",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-c6e4adfa",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-092a116f",[[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]},null,{filterId:["watchFilterId"],propertyName:["watchPropertyName"],aggregateOperator:["watchAggregateOperator"]}]]],["p-79ebedb9",[[1,"limebb-info-tile-date-format",{value:[16]}]]],["p-2c36b76b",[[1,"limebb-info-tile-decimal-format",{value:[16]}]]],["p-563e2f7c",[[1,"limebb-info-tile-format",{platform:[16],context:[16],type:[1],value:[16]}]]],["p-bb48c904",[[1,"limebb-info-tile-relative-date-format",{value:[16]}]]],["p-e850ce31",[[1,"limebb-info-tile-unit-format",{value:[16]}]]],["p-41102b9f",[[1,"limebb-limeobject-file-viewer",{platform:[16],context:[16],property:[1],fileTypes:[16],limeobject:[32],limetype:[32]}]]],["p-3dc64e90",[[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-03720dd5",[[1,"limebb-mention",{limetype:[1],objectid:[2],limeobject:[32]}]]],["p-6b7aa726",[[1,"limebb-mention-group-counter",{count:[2],limetype:[16],helperLabel:[1,"helper-label"]}]]],["p-aaa2de99",[[17,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-b7885367",[[1,"limebb-summary-popover",{heading:[513],subheading:[513],image:[16],icon:[513],value:[1],openDirection:[513,"open-direction"],actions:[16],isPopoverOpen:[32]}]]],["p-c8832ef4",[[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-9dfa33ee",[[1,"limebb-kanban-column",{platform:[16],context:[16],columnHeading:[1,"column-heading"],items:[16],loading:[4],paginationSize:[2,"pagination-size"],displayedItemCount:[32]}]]],["p-b5487e56",[[1,"limebb-text-editor-picker",{items:[16],open:[516],isSearching:[4,"is-searching"],emptyMessage:[1,"empty-message"]},null,{open:["watchOpen"]}]]],["p-36cf8e78",[[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-f92cae0c",[[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-0d83d4ee",[[1,"limebb-notification-item",{platform:[16],context:[16],item:[16]}]]],["p-33145de1",[[1,"limebb-kanban-item",{platform:[16],context:[16],item:[16]}]]],["p-8d9572d4",[[1,"limebb-empty-state",{heading:[513],value:[513],icon:[16]}]]]],e))));
1
+ import{p as e,b as t}from"./p-4b59a4d3.js";export{s as setNonce}from"./p-4b59a4d3.js";import{g as i}from"./p-e1255160.js";(()=>{const t=import.meta.url,i={};return""!==t&&(i.resourcesUrl=new URL(".",t).href),e(i)})().then((async e=>(await i(),t([["p-d67292c1",[[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-13e46b27",[[1,"limebb-kanban",{platform:[16],context:[16],items:[16],paginationSize:[2,"pagination-size"],groupBy:[513,"group-by"],groups:[16]}]]],["p-7e1fc88a",[[1,"limebb-text-editor",{platform:[16],context:[16],allowMentioning:[4,"allow-mentioning"],contentType:[1,"content-type"],language:[513],disabled:[516],readonly:[516],helperText:[513,"helper-text"],placeholder:[513],label:[513],invalid:[516],required:[516],selectedContext:[16],ui:[513],allowResize:[4,"allow-resize"],value:[1],items:[32],highlightedItemIndex:[32],customElements:[32],registeredTriggers:[32],editorPickerQuery:[32],searchableLimetypes:[32],isPickerOpen:[32],isSearching:[32]},null,{isPickerOpen:["watchOpen"],editorPickerQuery:["watchQuery"]}]]],["p-97ae646a",[[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-27e63f43",[[1,"limebb-info-tile-currency-format",{platform:[16],context:[16],value:[16]}]]],["p-6e84a2c4",[[1,"limebb-notification-list",{platform:[16],context:[16],items:[16],loading:[4],lastVisitedTimestamp:[1,"last-visited-timestamp"]},null,{items:["handleItemsChange"]}]]],["p-d30c8d5e",[[17,"limebb-browser",{platform:[16],context:[16],items:[16],layout:[1],filter:[32]}]]],["p-74e9d1a5",[[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]},null,{formInfo:["watchFormInfo"],configComponent:["watchconfigComponent"]}]]],["p-08da613f",[[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-3665678c",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-c6e4adfa",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-092a116f",[[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]},null,{filterId:["watchFilterId"],propertyName:["watchPropertyName"],aggregateOperator:["watchAggregateOperator"]}]]],["p-79ebedb9",[[1,"limebb-info-tile-date-format",{value:[16]}]]],["p-2c36b76b",[[1,"limebb-info-tile-decimal-format",{value:[16]}]]],["p-563e2f7c",[[1,"limebb-info-tile-format",{platform:[16],context:[16],type:[1],value:[16]}]]],["p-bb48c904",[[1,"limebb-info-tile-relative-date-format",{value:[16]}]]],["p-e850ce31",[[1,"limebb-info-tile-unit-format",{value:[16]}]]],["p-41102b9f",[[1,"limebb-limeobject-file-viewer",{platform:[16],context:[16],property:[1],fileTypes:[16],limeobject:[32],limetype:[32]}]]],["p-3dc64e90",[[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-03720dd5",[[1,"limebb-mention",{limetype:[1],objectid:[2],limeobject:[32]}]]],["p-6b7aa726",[[1,"limebb-mention-group-counter",{count:[2],limetype:[16],helperLabel:[1,"helper-label"]}]]],["p-aaa2de99",[[17,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-b7885367",[[1,"limebb-summary-popover",{heading:[513],subheading:[513],image:[16],icon:[513],value:[1],openDirection:[513,"open-direction"],actions:[16],isPopoverOpen:[32]}]]],["p-c8832ef4",[[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-7efbc4dd",[[1,"limebb-kanban-column",{platform:[16],context:[16],columnHeading:[1,"column-heading"],items:[16],loading:[4],paginationSize:[2,"pagination-size"],displayedItemCount:[32]}]]],["p-b5487e56",[[1,"limebb-text-editor-picker",{items:[16],open:[516],isSearching:[4,"is-searching"],emptyMessage:[1,"empty-message"]},null,{open:["watchOpen"]}]]],["p-36cf8e78",[[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-f92cae0c",[[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-0d83d4ee",[[1,"limebb-notification-item",{platform:[16],context:[16],item:[16]}]]],["p-ee32100b",[[1,"limebb-kanban-item",{platform:[16],context:[16],item:[16]}]]],["p-8d9572d4",[[1,"limebb-empty-state",{heading:[513],value:[513],icon:[16]}]]]],e))));
@@ -0,0 +1 @@
1
+ import{r as e,c as r,h as a}from"./p-4b59a4d3.js";import{P as n}from"./p-a26d352f.js";const o=class{constructor(a){e(this,a),this.loadMore=r(this,"loadMore",7),this.columnHeading="Ungrouped",this.items=[],this.displayedItemCount=0,this.handleLoadMore=e=>{e.stopPropagation(),this.displayedItemCount+=this.paginationSize,this.loadMore.emit()}}componentWillLoad(){this.displayedItemCount=this.paginationSize}render(){return[this.renderColumnHeading(),a("div",{key:"c02fd02dbea2d5155cf252bb2b9e3ed45d5c917c",class:"items"},this.renderSpinner(),this.renderKanbanItems(),this.renderLoadMore())]}renderColumnHeading(){return a("div",{class:"column-heading"},a("limel-header",{heading:this.columnHeading}),this.renderItemNumber())}renderItemNumber(){if(this.items.length>0)return a("limel-badge",{label:this.items.length})}renderSpinner(){if(this.loading)return a("limel-spinner",{size:"small"})}renderKanbanItems(){return this.items.slice(0,this.displayedItemCount).map((e=>a("limebb-kanban-item",{tabindex:0,platform:this.platform,context:this.context,item:e,key:e.id})))}renderLoadMore(){if(this.items.length&&!(this.displayedItemCount>=this.items.length))return a("limel-icon-button",{class:"load-more-button",icon:"more",onClick:this.handleLoadMore,elevated:!0,label:this.translator.get("webclient.load-more")})}get translator(){return this.platform.get(n.Translate)}};o.style='@charset "UTF-8";:host(limebb-kanban-column){background-color:rgb(var(--limebb-kanban-column-grouped-background));--header-top-right-left-border-radius:0.5rem;--limebb-kanban-column-ungrouped-background:var(--contrast-300);--limebb-kanban-column-grouped-background:var(--contrast-500);scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}:host(limebb-kanban-column.ungrouped-column) limel-header{background-color:rgb(var(--limebb-kanban-column-ungrouped-background))}limel-header{flex-shrink:0;width:auto;background-color:rgb(var(--limebb-kanban-column-grouped-background))}limel-badge{--badge-background-color:rgb(var(--contrast-200))}.column-heading{display:flex}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limebb-kanban-item:focus{outline:none}limebb-kanban-item:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}';export{o as limebb_kanban_column}
@@ -0,0 +1 @@
1
+ import{r as e,c as i,h as r,H as o}from"./p-4b59a4d3.js";import{P as s}from"./p-a26d352f.js";const t=class{constructor(o){e(this,o),this.interact=i(this,"interact",7),this.renderRelations=()=>{var e,i,o;if(null===(i=null===(e=this.item)||void 0===e?void 0:e.relations)||void 0===i?void 0:i.length)return r("limel-chip-set",{value:null===(o=this.item)||void 0===o?void 0:o.relations})},this.renderAssigneesAvatar=e=>e.picture?r("img",{loading:"lazy",src:e.picture,alt:e.text}):r("limel-icon",{name:e.icon.name,style:{color:`${e.icon.color}`,"background-color":`${e.icon.backgroundColor}`}}),this.createMenuItem=e=>{var i,r;return"separator"in e?e:{value:e,text:null!==(i=e.label)&&void 0!==i?i:"",secondaryText:e.description,disabled:e.disabled,icon:null!==(r=e.icon)&&void 0!==r?r:""}},this.handleMenuItemSelect=e=>{var i;e.stopPropagation();const r=null===(i=e.detail.value)||void 0===i?void 0:i.command;r&&this.commandbus.handle(r)},this.handleKanbanItemClick=()=>{this.interact.emit()}}render(){var e,i;return r(o,{key:"82f1297fd090d0c7f4cd8b89f809c806ae13846a",id:this.item.id.toString(),class:{"has-unpromoted-actions":!!(null===(e=this.item.unpromotedActions)||void 0===e?void 0:e.length),"has-author-picture":!!(null===(i=this.item.author)||void 0===i?void 0:i.picture)},style:{"--color-code":`${this.item.color}`},onClick:this.handleKanbanItemClick},this.renderHeader(),this.renderContent(),this.renderFooter())}renderHeader(){return r("div",{class:"header"},this.renderIcon(),this.renderAuthorPicture(),this.renderAuthor(),this.renderHeading(),this.renderUnpromotedActionsMenu())}renderIcon(){var e,i,o,s;if(this.item.icon)return r("limel-icon",{class:"icon",badge:!0,name:null!==(i=null===(e=this.item.icon)||void 0===e?void 0:e.name)&&void 0!==i?i:"dot_circle",style:{color:`${null===(o=this.item.icon)||void 0===o?void 0:o.color}`,"background-color":`${null===(s=this.item.icon)||void 0===s?void 0:s.backgroundColor}`}})}renderContent(){return r("div",{class:"content"},this.renderValue(),this.renderRelations())}renderAuthor(){if(this.item.author&&this.item.heading){if("string"==typeof this.item.author.name)return r("span",{class:"author"},this.item.author.name);if("object"==typeof this.item.author.name){const{href:e,title:i,text:o}=this.item.author.name;return r("a",{class:"author",href:e,title:i},o)}}}renderAuthorPicture(){var e;if(null===(e=this.item.author)||void 0===e?void 0:e.picture)return r("img",{loading:"lazy",src:this.item.author.picture})}renderHeading(){if(this.item.heading)return[r("limel-markdown",{class:{heading:!0},value:this.item.heading})]}renderValue(){if(this.item.value)return[r("div",{class:"body"},r("limel-markdown",{class:{"body-text":!0},value:this.item.value}))]}renderUnpromotedActionsMenu(){var e,i;if(!(null===(e=this.item.unpromotedActions)||void 0===e?void 0:e.length))return;const o=this.item.unpromotedActions.map(this.createMenuItem);return r("limel-menu",{class:"unpromoted-actions-menu",items:o,openDirection:"bottom-end",onSelect:this.handleMenuItemSelect},r("limel-icon-button",{icon:"menu_2",slot:"trigger",label:null===(i=this.translator)||void 0===i?void 0:i.get("webclient.more-actions")}))}renderFooter(){return r("div",{class:"footer"},this.renderTimestamp(),this.renderAssignees())}renderAssignees(){var e;if(null===(e=this.item.assignees)||void 0===e?void 0:e.length)return r("div",{class:"assignees"},this.item.assignees.map((e=>r("a",{class:"assignee",href:e.name.href,title:e.name.text},this.renderAssigneesAvatar(e),r("span",null,e.name.text)))))}renderTimestamp(){const e=this.item.timestamp;if(e)return r("span",{class:"timestamp"},this.dateTimeFormatter.format(e,"date"))}get dateTimeFormatter(){return this.platform.get(s.DateTimeFormatter)}get translator(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(s.Translate)}get commandbus(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(s.CommandBus)}};t.style='@charset "UTF-8";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:"";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.header img,.header limel-icon,.footer img,.footer limel-icon{flex-shrink:0;width:1.25rem;height:1.25rem}.header img,.footer img{border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}.assignees{margin-right:-0.25rem;display:flex;align-items:center;gap:0.25rem}.assignees:has(>:nth-child(2)) span{display:none}.assignees:has(>:nth-child(2)) img,.assignees:has(>:nth-child(2)) limel-icon{margin-left:-0.5rem}.assignees:hover img,.assignees:hover limel-icon,.assignees:focus-within img,.assignees:focus-within limel-icon{margin-left:0rem}.assignees:hover .assignee:not(:hover):not(:focus-visible) img,.assignees:hover .assignee:not(:hover):not(:focus-visible) limel-icon,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) img,.assignees:focus-within .assignee:not(:hover):not(:focus-visible) limel-icon{filter:grayscale(1);opacity:0.6}.assignee{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;display:flex;align-items:center;text-decoration:none;gap:0.25rem;margin-left:0;border-radius:1rem}.assignee:hover,.assignee:focus,.assignee:focus-visible{will-change:color, background-color, box-shadow, transform}.assignee: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)}.assignee: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)}.assignee:hover,.assignee:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}.assignee:focus{outline:none}.assignee:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}.assignee limel-icon,.assignee img{transition:margin 0.2s ease, opacity 0.2s ease, filter 0.2s ease}.assignee limel-icon{padding:0.125rem;box-shadow:0 0 0 1px rgb(var(--contrast-800), 0.4);background-color:rgb(var(--contrast-100))}.assignee span{font-size:0.75rem;color:rgb(var(--contrast-900));padding-right:0.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}';export{t as limebb_kanban_item}
@@ -41,6 +41,7 @@ export declare class KanbanColumn implements LimeWebComponent {
41
41
  componentWillLoad(): void;
42
42
  render(): any[];
43
43
  private renderColumnHeading;
44
+ private renderItemNumber;
44
45
  private renderSpinner;
45
46
  private renderKanbanItems;
46
47
  private renderLoadMore;
@@ -34,6 +34,8 @@ export declare class KanbanItemComponent implements LimeWebComponent {
34
34
  private renderValue;
35
35
  private renderUnpromotedActionsMenu;
36
36
  private renderFooter;
37
+ private renderAssignees;
38
+ private renderAssigneesAvatar;
37
39
  private createMenuItem;
38
40
  private renderTimestamp;
39
41
  private handleMenuItemSelect;
@@ -1,8 +1,33 @@
1
+ import { Icon } from '@limetech/lime-web-components';
1
2
  import { BasicLimetypeProps } from '../../../util/basic-limetype-props';
3
+ import { Link } from '@limetech/lime-elements';
2
4
  export interface KanbanItem extends BasicLimetypeProps {
3
5
  /**
4
6
  * A property on the item that can be used to group the items
5
7
  * into columns.
6
8
  */
7
9
  [groupByProperty: string]: any;
10
+ /**
11
+ * Represents the responsible of the item, indicating "who" is
12
+ * assigned to it.
13
+ */
14
+ assignees?: Assignee[];
15
+ }
16
+ export interface Assignee {
17
+ /**
18
+ * The unique identifier for the assignee.
19
+ */
20
+ id: number | string;
21
+ /**
22
+ * The name of the assignee, has to be a link to an object in CRM.
23
+ */
24
+ name: Link;
25
+ /**
26
+ * The URL of the assinee's picture (optional).
27
+ */
28
+ picture?: string;
29
+ /**
30
+ * If no picture icon will be displayed.
31
+ */
32
+ icon: Icon;
8
33
  }
@@ -9,6 +9,7 @@ import { KanbanItem } from './kanban-item/kanban-item.types';
9
9
  * work-in-progress, and identify bottlenecks.
10
10
  *
11
11
  * @exampleComponent limebb-example-kanban-basic
12
+ * @exampleComponent limebb-example-kanban-assignees
12
13
  * @exampleComponent limebb-example-kanban-color-coding
13
14
  * @exampleComponent limebb-example-kanban-unpromoted-actions
14
15
  * @private
@@ -666,6 +666,7 @@ export namespace Components {
666
666
  * This layout enables teams to visualize work progress, limit
667
667
  * work-in-progress, and identify bottlenecks.
668
668
  * @exampleComponent limebb-example-kanban-basic
669
+ * @exampleComponent limebb-example-kanban-assignees
669
670
  * @exampleComponent limebb-example-kanban-color-coding
670
671
  * @exampleComponent limebb-example-kanban-unpromoted-actions
671
672
  * @private
@@ -1690,6 +1691,7 @@ declare global {
1690
1691
  * This layout enables teams to visualize work progress, limit
1691
1692
  * work-in-progress, and identify bottlenecks.
1692
1693
  * @exampleComponent limebb-example-kanban-basic
1694
+ * @exampleComponent limebb-example-kanban-assignees
1693
1695
  * @exampleComponent limebb-example-kanban-color-coding
1694
1696
  * @exampleComponent limebb-example-kanban-unpromoted-actions
1695
1697
  * @private
@@ -2751,6 +2753,7 @@ declare namespace LocalJSX {
2751
2753
  * This layout enables teams to visualize work progress, limit
2752
2754
  * work-in-progress, and identify bottlenecks.
2753
2755
  * @exampleComponent limebb-example-kanban-basic
2756
+ * @exampleComponent limebb-example-kanban-assignees
2754
2757
  * @exampleComponent limebb-example-kanban-color-coding
2755
2758
  * @exampleComponent limebb-example-kanban-unpromoted-actions
2756
2759
  * @private
@@ -3511,6 +3514,7 @@ declare module "@stencil/core" {
3511
3514
  * This layout enables teams to visualize work progress, limit
3512
3515
  * work-in-progress, and identify bottlenecks.
3513
3516
  * @exampleComponent limebb-example-kanban-basic
3517
+ * @exampleComponent limebb-example-kanban-assignees
3514
3518
  * @exampleComponent limebb-example-kanban-color-coding
3515
3519
  * @exampleComponent limebb-example-kanban-unpromoted-actions
3516
3520
  * @private
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@limetech/lime-crm-building-blocks",
3
- "version": "1.58.1",
3
+ "version": "1.60.0",
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",
@@ -42,9 +42,9 @@
42
42
  },
43
43
  "devDependencies": {
44
44
  "@eslint/eslintrc": "^3.2.0",
45
- "@eslint/js": "^9.17.0",
45
+ "@eslint/js": "^9.18.0",
46
46
  "@limetech/lime-elements": "^37.79.1",
47
- "@limetech/lime-web-components": "^5.41.1",
47
+ "@limetech/lime-web-components": "^5.42.0",
48
48
  "@lundalogik/lime-icons8": "^2.30.1",
49
49
  "@lundalogik/limeclient.js": "^1.76.2",
50
50
  "@stencil/core": "^4.23.1",
@@ -52,18 +52,18 @@
52
52
  "@types/jest": "^29.5.14",
53
53
  "@types/json-schema": "^7.0.15",
54
54
  "@types/lodash-es": "^4.17.12",
55
- "@typescript-eslint/eslint-plugin": "^8.19.1",
56
- "@typescript-eslint/parser": "^8.19.1",
55
+ "@typescript-eslint/eslint-plugin": "^8.20.0",
56
+ "@typescript-eslint/parser": "^8.20.0",
57
57
  "cross-env": "^7.0.3",
58
58
  "currency-codes": "^2.2.0",
59
59
  "date-fns": "^3.6.0",
60
- "eslint": "^9.17.0",
61
- "eslint-config-prettier": "^9.1.0",
60
+ "eslint": "^9.18.0",
61
+ "eslint-config-prettier": "^10.0.1",
62
62
  "eslint-plugin-ban": "^2.0.0",
63
63
  "eslint-plugin-jsdoc": "^50.6.1",
64
64
  "eslint-plugin-prefer-arrow": "^1.2.3",
65
65
  "eslint-plugin-prettier": "^5.2.1",
66
- "eslint-plugin-react": "^7.37.3",
66
+ "eslint-plugin-react": "^7.37.4",
67
67
  "eslint-plugin-sonarjs": "^3.0.1",
68
68
  "fs": "^0.0.1-security",
69
69
  "globals": "^15.14.0",
@@ -1 +0,0 @@
1
- import{r,c as e,h as t,H as i}from"./p-4b59a4d3.js";import{P as o}from"./p-a26d352f.js";const s=class{constructor(i){r(this,i),this.interact=e(this,"interact",7),this.renderRelations=()=>{var r,e,i;if(null===(e=null===(r=this.item)||void 0===r?void 0:r.relations)||void 0===e?void 0:e.length)return t("limel-chip-set",{value:null===(i=this.item)||void 0===i?void 0:i.relations})},this.createMenuItem=r=>{var e,t;return"separator"in r?r:{value:r,text:null!==(e=r.label)&&void 0!==e?e:"",secondaryText:r.description,disabled:r.disabled,icon:null!==(t=r.icon)&&void 0!==t?t:""}},this.handleMenuItemSelect=r=>{var e;r.stopPropagation();const t=null===(e=r.detail.value)||void 0===e?void 0:e.command;t&&this.commandbus.handle(t)},this.handleKanbanItemClick=()=>{this.interact.emit()}}render(){var r,e;return t(i,{key:"82f1297fd090d0c7f4cd8b89f809c806ae13846a",id:this.item.id.toString(),class:{"has-unpromoted-actions":!!(null===(r=this.item.unpromotedActions)||void 0===r?void 0:r.length),"has-author-picture":!!(null===(e=this.item.author)||void 0===e?void 0:e.picture)},style:{"--color-code":`${this.item.color}`},onClick:this.handleKanbanItemClick},this.renderHeader(),this.renderContent(),this.renderFooter())}renderHeader(){return t("div",{class:"header"},this.renderIcon(),this.renderAuthorPicture(),this.renderAuthor(),this.renderHeading(),this.renderUnpromotedActionsMenu())}renderIcon(){var r,e,i,o;if(this.item.icon)return t("limel-icon",{class:"icon",badge:!0,name:null!==(e=null===(r=this.item.icon)||void 0===r?void 0:r.name)&&void 0!==e?e:"dot_circle",style:{color:`${null===(i=this.item.icon)||void 0===i?void 0:i.color}`,"background-color":`${null===(o=this.item.icon)||void 0===o?void 0:o.backgroundColor}`}})}renderContent(){return t("div",{class:"content"},this.renderValue(),this.renderRelations())}renderAuthor(){if(this.item.author&&this.item.heading){if("string"==typeof this.item.author.name)return t("span",{class:"author"},this.item.author.name);if("object"==typeof this.item.author.name){const{href:r,title:e,text:i}=this.item.author.name;return t("a",{class:"author",href:r,title:e},i)}}}renderAuthorPicture(){var r;if(null===(r=this.item.author)||void 0===r?void 0:r.picture)return t("img",{loading:"lazy",src:this.item.author.picture})}renderHeading(){if(this.item.heading)return[t("limel-markdown",{class:{heading:!0},value:this.item.heading})]}renderValue(){if(this.item.value)return[t("div",{class:"body"},t("limel-markdown",{class:{"body-text":!0},value:this.item.value}))]}renderUnpromotedActionsMenu(){var r,e;if(!(null===(r=this.item.unpromotedActions)||void 0===r?void 0:r.length))return;const i=this.item.unpromotedActions.map(this.createMenuItem);return t("limel-menu",{class:"unpromoted-actions-menu",items:i,openDirection:"bottom-end",onSelect:this.handleMenuItemSelect},t("limel-icon-button",{icon:"menu_2",slot:"trigger",label:null===(e=this.translator)||void 0===e?void 0:e.get("webclient.more-actions")}))}renderFooter(){return t("div",{class:"footer"},this.renderTimestamp())}renderTimestamp(){const r=this.item.timestamp;if(r)return t("span",{class:"timestamp"},this.dateTimeFormatter.format(r,"date"))}get dateTimeFormatter(){return this.platform.get(o.DateTimeFormatter)}get translator(){var r;return null===(r=this.platform)||void 0===r?void 0:r.get(o.Translate)}get commandbus(){var r;return null===(r=this.platform)||void 0===r?void 0:r.get(o.CommandBus)}};s.style='@charset "UTF-8";:host(limebb-kanban-item){box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem}.header{display:flex;align-items:center;gap:0.5rem;padding:0.25rem;border-radius:0.5rem 0.5rem 0 0;background-color:rgb(var(--contrast-200))}.header .icon{flex-shrink:0;width:1.25rem}.header img{border-radius:50%;width:1.25rem;height:1.25rem;object-fit:cover;box-shadow:0 0 0 1px rgb(var(--contrast-800))}.header a{position:relative;cursor:pointer;transition:color 0.2s ease;color:var(--mdc-theme-primary);text-decoration:none}.header a: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)}.header a:hover{color:rgb(var(--color-teal-light))}.header a:hover:before{opacity:0.3;transform:scale(1)}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.unpromoted-actions-menu{margin:-0.25rem -0.25rem -0.25rem auto}.body{padding:0.5rem}limel-chip-set{display:block;margin-left:-0.5rem;margin-bottom:-0.5rem}.footer{position:relative;display:flex;align-items:center;justify-content:flex-end;padding:0.25rem 0.5rem;border-top:1px dashed rgb(var(--contrast-300))}.footer:after{content:"";display:block;position:absolute;top:0.25rem;bottom:0.25rem;left:0.125rem;width:0.25rem;border-radius:0.25rem;background-color:var(--color-code)}.timestamp{font-size:0.75rem;color:rgb(var(--contrast-800))}';export{s as limebb_kanban_item}
@@ -1 +0,0 @@
1
- import{r as e,c as r,h as a}from"./p-4b59a4d3.js";import{P as o}from"./p-a26d352f.js";const i=class{constructor(a){e(this,a),this.loadMore=r(this,"loadMore",7),this.columnHeading="Ungrouped",this.items=[],this.displayedItemCount=0,this.handleLoadMore=e=>{e.stopPropagation(),this.displayedItemCount+=this.paginationSize,this.loadMore.emit()}}componentWillLoad(){this.displayedItemCount=this.paginationSize}render(){return[this.renderColumnHeading(),a("div",{key:"c02fd02dbea2d5155cf252bb2b9e3ed45d5c917c",class:"items"},this.renderSpinner(),this.renderKanbanItems(),this.renderLoadMore())]}renderColumnHeading(){return a("limel-header",{heading:this.columnHeading})}renderSpinner(){if(this.loading)return a("limel-spinner",{size:"small"})}renderKanbanItems(){return this.items.slice(0,this.displayedItemCount).map((e=>a("limebb-kanban-item",{platform:this.platform,context:this.context,item:e,key:e.id})))}renderLoadMore(){if(this.items.length&&!(this.displayedItemCount>=this.items.length))return a("limel-icon-button",{class:"load-more-button",icon:"more",onClick:this.handleLoadMore,elevated:!0,label:this.translator.get("webclient.load-more")})}get translator(){return this.platform.get(o.Translate)}};i.style='@charset "UTF-8";:host(limebb-kanban-column){--header-top-right-left-border-radius:0.5rem;scroll-snap-align:start;box-sizing:border-box;display:flex;flex-direction:column;border-radius:0.5rem;min-width:20rem;background-color:rgb(var(--contrast-500))}:host(limebb-kanban-column.ungrouped-column){border:1px dashed rgb(var(--contrast-700));background-color:rgb(var(--contrast-300))}:host(limebb-kanban-column.ungrouped-column) limebb-kanban-item{border:1px dashed rgb(var(--contrast-700))}limel-header{flex-shrink:0}.items{flex-grow:1;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;overflow-y:auto;-webkit-overflow-scrolling:touch}limebb-kanban-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:var(--lime-elevated-surface-background-color)}limebb-kanban-item:hover,limebb-kanban-item:focus,limebb-kanban-item:focus-visible{will-change:color, background-color, box-shadow, transform}limebb-kanban-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)}limebb-kanban-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)}limebb-kanban-item:hover,limebb-kanban-item:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}';export{i as limebb_kanban_column}