@limetech/lime-crm-building-blocks 1.31.1 → 1.31.3
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 +16 -0
- package/dist/cjs/lime-crm-building-blocks.cjs.js +1 -1
- package/dist/cjs/limebb-feed-timeline-item.cjs.entry.js +46 -27
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/feed/feed-item/feed-timeline-item.css +58 -1
- package/dist/collection/components/feed/feed-item/feed-timeline-item.js +47 -26
- package/dist/collection/components/feed/feed.js +1 -0
- package/dist/components/feed-timeline-item.js +48 -27
- package/dist/esm/lime-crm-building-blocks.js +1 -1
- package/dist/esm/limebb-feed-timeline-item.entry.js +46 -27
- package/dist/esm/loader.js +1 -1
- package/dist/lime-crm-building-blocks/lime-crm-building-blocks.esm.js +1 -1
- package/dist/lime-crm-building-blocks/p-2aee279b.entry.js +1 -0
- package/dist/types/components/feed/feed-item/feed-timeline-item.d.ts +12 -3
- package/dist/types/components/feed/feed.d.ts +1 -0
- package/package.json +2 -2
- package/dist/lime-crm-building-blocks/p-dd1c0cb7.entry.js +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
### [1.31.3](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.31.2...v1.31.3) (2024-03-15)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
* **feed-item:** align the `more` button ([1822dc8](https://github.com/Lundalogik/lime-crm-building-blocks/commit/1822dc82a5cc29c54b6090dbbd01cc0e6dc26ee4))
|
|
8
|
+
|
|
9
|
+
### [1.31.2](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.31.1...v1.31.2) (2024-03-14)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
* **feed-item:** enable users to expand a truncated header to see it fully ([d8b3783](https://github.com/Lundalogik/lime-crm-building-blocks/commit/d8b37832bc6baa8c33232eecae8419006d479eb0))
|
|
16
|
+
|
|
1
17
|
### [1.31.1](https://github.com/Lundalogik/lime-crm-building-blocks/compare/v1.31.0...v1.31.1) (2024-03-13)
|
|
2
18
|
|
|
3
19
|
|
|
@@ -15,5 +15,5 @@ const patchBrowser = () => {
|
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
patchBrowser().then(options => {
|
|
18
|
-
return index.bootstrapLazy([["limebb-date-range.cjs",[[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]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker.cjs",[[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]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker.cjs",[[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]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"showMore":[32],"isTall":[32]}]]]], options);
|
|
18
|
+
return index.bootstrapLazy([["limebb-date-range.cjs",[[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]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker.cjs",[[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]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker.cjs",[[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]}]]],["limebb-feed-timeline-item.cjs",[[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]}]]]], options);
|
|
19
19
|
});
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
const index = require('./index-0ceb2726.js');
|
|
6
6
|
const types = require('./types-5327b47f.js');
|
|
7
7
|
|
|
8
|
-
const feedTimelineItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:\"\";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;
|
|
8
|
+
const feedTimelineItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:\"\";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;gap:0.25rem;padding-bottom:0.25rem;margin-top:-0.25rem;color:rgb(var(--contrast-900));font-size:0.875rem}:host(.has-unpromoted-actions) .header{padding-right:2rem}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.heading{flex-grow:1;overflow:hidden;white-space:nowrap}.heading.expanded-heading{white-space:normal}button.expand-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:rgb(var(--color-blue-default));background-color:transparent;border-radius:1rem;padding:0 0.25rem 0.25rem 0.25rem;height:1rem;white-space:nowrap}button.expand-heading:hover{color:rgb(var(--color-blue-default));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.expand-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:1.5rem;width:1rem}button.collapse-heading:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.collapse-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading:focus{outline:none}button.collapse-heading:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.collapse-heading limel-icon{width:0.75rem}.unpromoted-actions-menu{position:absolute;top:0;right:0}.timestamp{transition:color 0.4s ease, opacity 0.2s ease;transition-delay:var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;text-align:center;color:rgb(var(--contrast-800));background-color:var(--limebb-feed-background-color);padding:0.125rem 0}.icon{--icon-background-color:var(--limebb-feed-background-color);width:2rem;padding:0.125rem}:host(.has-author-picture) .icon{width:1.5rem}img{border-radius:50%;width:2rem;height:2rem;object-fit:cover;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}limel-action-bar{--action-bar-item-height:1.75rem;transition:opacity 0.2s ease;justify-content:flex-start;opacity:0.8}.action-bar{display:grid;transition:grid-template-rows var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-feed-item-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay);padding-bottom:0.5rem}:host(limebb-feed-timeline-item:hover) .action-bar,:host(limebb-feed-timeline-item:focus-within) .action-bar,:host(limebb-feed-timeline-item:focus-visible) .action-bar{--limebb-feed-item-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-feed-timeline-item:hover) limel-action-bar,:host(limebb-feed-timeline-item:focus-within) limel-action-bar,:host(limebb-feed-timeline-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-feed-timeline-item:hover){--limebb-feed-item-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-feed-item-action-bar-grid-template-rows-transition-delay:0.5s}:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{min-height:10.25rem}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:\"\";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{transition:grid-template-rows calc(var(--body-text-height) * 1.2ms) cubic-bezier(1, 0.09, 0, 0.89);position:relative;display:grid}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}:host(limebb-feed-timeline-item[ui=standard]) .content{background-color:rgb(var(--limebb-feed-item-background-color))}:host(limebb-feed-timeline-item[ui=emphasized]) .content{border:1px dashed rgb(var(--contrast-800))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown{--markdown-hyperlink-color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown:hover{--markdown-hyperlink-color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) a.author{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .header:hover a.author{color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) .icon{color:rgb(var(--contrast-900)) !important}:host(limebb-feed-timeline-item[ui=minimal]) .body-text{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .body-text:hover{color:rgb(var(--contrast-1100))}.content{position:relative}.content:before,.content:after{content:\"\";position:absolute;top:1rem;bottom:1rem;left:-0.125rem;width:0.25rem;border-radius:0.25rem}.content:before{background-color:var(--color-code)}:host(limebb-feed-timeline-item[type=external]) .content:before,:host(limebb-feed-timeline-item[type=external]) .content:after{left:calc(-0.125rem - 0.5px)}:host(limebb-feed-timeline-item[type=system]) .content:before{opacity:0.25}:host(limebb-feed-timeline-item[type=system]) .content:after{opacity:0.5;background:repeating-linear-gradient(45deg, var(--color-code), var(--color-code) 0.5rem, transparent 0.5rem, transparent 1rem);background-size:0.25rem 100%;background-repeat:repeat-y;background-position:left;rotate:180deg}";
|
|
9
9
|
|
|
10
10
|
const FeedTimelineItem = class {
|
|
11
11
|
constructor(hostRef) {
|
|
@@ -26,6 +26,14 @@ const FeedTimelineItem = class {
|
|
|
26
26
|
* and the markdown content in the body of the
|
|
27
27
|
* feed item is expanded.
|
|
28
28
|
*/
|
|
29
|
+
this.headingCanExpand = false;
|
|
30
|
+
/**
|
|
31
|
+
* Will be toggled, when the "More" / "Less" button in the "header" is clicked.
|
|
32
|
+
*/
|
|
33
|
+
this.isHeadingExpanded = false;
|
|
34
|
+
/**
|
|
35
|
+
* Will be toggled when the "Show more" / "Show less" button is clicked.
|
|
36
|
+
*/
|
|
29
37
|
this.showMore = false;
|
|
30
38
|
/**
|
|
31
39
|
* Will be set to true, when the markdown content in the body of the
|
|
@@ -34,7 +42,7 @@ const FeedTimelineItem = class {
|
|
|
34
42
|
* as well as adding certain visual effects.
|
|
35
43
|
*/
|
|
36
44
|
this.isTall = false;
|
|
37
|
-
this.
|
|
45
|
+
this.collapsibleButtonId = 'a' + crypto.randomUUID();
|
|
38
46
|
this.bodyTextTall = (entries) => {
|
|
39
47
|
if (!(entries === null || entries === void 0 ? void 0 : entries.length)) {
|
|
40
48
|
return;
|
|
@@ -51,7 +59,7 @@ const FeedTimelineItem = class {
|
|
|
51
59
|
(!this.item.author && !this.item.heading)) {
|
|
52
60
|
return;
|
|
53
61
|
}
|
|
54
|
-
return (index.h("div", {
|
|
62
|
+
return (index.h("div", { class: "header" }, this.renderAuthor(), this.renderHeading(), this.renderExpandCollapseHeadingButton()));
|
|
55
63
|
};
|
|
56
64
|
this.renderRelations = () => {
|
|
57
65
|
var _a, _b, _c;
|
|
@@ -60,12 +68,32 @@ const FeedTimelineItem = class {
|
|
|
60
68
|
}
|
|
61
69
|
return index.h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
|
|
62
70
|
};
|
|
71
|
+
this.renderExpandCollapseHeadingButton = () => {
|
|
72
|
+
var _a, _b;
|
|
73
|
+
if (!this.item.heading || !this.headingCanExpand) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
if (!this.isHeadingExpanded) {
|
|
77
|
+
return [
|
|
78
|
+
index.h("button", { onClick: this.toggleHeadingExpansion, class: "expand-heading" }, (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get('webclient.more')),
|
|
79
|
+
];
|
|
80
|
+
}
|
|
81
|
+
if (this.isHeadingExpanded) {
|
|
82
|
+
return [
|
|
83
|
+
index.h("button", { onClick: this.toggleHeadingExpansion, id: this.collapsibleButtonId, class: "collapse-heading" }, index.h("limel-icon", { name: "angle_up" })),
|
|
84
|
+
index.h("limel-tooltip", { elementId: this.collapsibleButtonId, label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.show-less'), openDirection: "top-end" }),
|
|
85
|
+
];
|
|
86
|
+
}
|
|
87
|
+
};
|
|
63
88
|
this.setBodyTextElement = (element) => {
|
|
64
89
|
this.bodyTextElement = element;
|
|
65
90
|
};
|
|
66
91
|
this.toggleShowMore = () => {
|
|
67
92
|
this.showMore = !this.showMore;
|
|
68
93
|
};
|
|
94
|
+
this.toggleHeadingExpansion = () => {
|
|
95
|
+
this.isHeadingExpanded = !this.isHeadingExpanded;
|
|
96
|
+
};
|
|
69
97
|
this.createMenuItem = (action) => {
|
|
70
98
|
var _a, _b;
|
|
71
99
|
if ('separator' in action) {
|
|
@@ -116,6 +144,12 @@ const FeedTimelineItem = class {
|
|
|
116
144
|
};
|
|
117
145
|
}
|
|
118
146
|
componentDidLoad() {
|
|
147
|
+
var _a, _b;
|
|
148
|
+
const headingElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.heading');
|
|
149
|
+
const headingParagraphElement = (_b = headingElement === null || headingElement === void 0 ? void 0 : headingElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('p');
|
|
150
|
+
if (headingParagraphElement) {
|
|
151
|
+
this.headingCanExpand = this.isTextTruncated(headingParagraphElement);
|
|
152
|
+
}
|
|
119
153
|
if (!this.bodyTextElement) {
|
|
120
154
|
return;
|
|
121
155
|
}
|
|
@@ -132,6 +166,7 @@ const FeedTimelineItem = class {
|
|
|
132
166
|
'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
|
|
133
167
|
'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
|
|
134
168
|
'shows-less': !this.showMore,
|
|
169
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
135
170
|
'shows-more': this.showMore,
|
|
136
171
|
'is-tall': this.isTall,
|
|
137
172
|
}, style: {
|
|
@@ -182,32 +217,13 @@ const FeedTimelineItem = class {
|
|
|
182
217
|
return;
|
|
183
218
|
}
|
|
184
219
|
return [
|
|
185
|
-
index.h("limel-markdown", { class:
|
|
186
|
-
|
|
220
|
+
index.h("limel-markdown", { class: {
|
|
221
|
+
heading: true,
|
|
222
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
223
|
+
'truncate-paragraphs': !this.isHeadingExpanded,
|
|
224
|
+
}, value: this.item.heading }),
|
|
187
225
|
];
|
|
188
226
|
}
|
|
189
|
-
getHeaderTooltipLabel() {
|
|
190
|
-
var _a;
|
|
191
|
-
const author = (_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name;
|
|
192
|
-
const heading = this.extractPlainText(this.item.heading);
|
|
193
|
-
if (!author) {
|
|
194
|
-
return heading;
|
|
195
|
-
}
|
|
196
|
-
const authorName = typeof author === 'object' ? author.text : author;
|
|
197
|
-
return `${authorName} ${heading}`;
|
|
198
|
-
}
|
|
199
|
-
extractPlainText(markdown) {
|
|
200
|
-
// This function is used to convert markdown syntax to pla in text.
|
|
201
|
-
// We would like to display a normal sentence in the tooltip,
|
|
202
|
-
// instead of displaying the raw markdown syntax.
|
|
203
|
-
// For example, it turns '[link text](url)' into 'link text'.
|
|
204
|
-
return markdown
|
|
205
|
-
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // replace link syntax
|
|
206
|
-
.replace(/\*\*(.*?)\*\*/g, '$1') // replace bold syntax (**bold**)
|
|
207
|
-
.replace(/__(.*?)__/g, '$1') // replace bold syntax (__bold__)
|
|
208
|
-
.replace(/\*(.*?)\*/g, '$1') // replace italic syntax (*italic*)
|
|
209
|
-
.replace(/_(.*?)_/g, '$1'); // replace italic syntax (_italic_)
|
|
210
|
-
}
|
|
211
227
|
renderValue() {
|
|
212
228
|
if (!this.item.value) {
|
|
213
229
|
return;
|
|
@@ -216,6 +232,9 @@ const FeedTimelineItem = class {
|
|
|
216
232
|
index.h("div", { class: "markdown-container" }, index.h("limel-markdown", { class: "body-text", value: this.item.value, ref: this.setBodyTextElement }), this.renderShowMoreButton()),
|
|
217
233
|
];
|
|
218
234
|
}
|
|
235
|
+
isTextTruncated(element) {
|
|
236
|
+
return element.offsetWidth < element.scrollWidth;
|
|
237
|
+
}
|
|
219
238
|
renderShowMoreButton() {
|
|
220
239
|
if (!this.isTall) {
|
|
221
240
|
return;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -14,7 +14,7 @@ const patchEsm = () => {
|
|
|
14
14
|
const defineCustomElements = (win, options) => {
|
|
15
15
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
16
16
|
return patchEsm().then(() => {
|
|
17
|
-
return index.bootstrapLazy([["limebb-date-range.cjs",[[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]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker.cjs",[[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]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker.cjs",[[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]}]]],["limebb-feed-timeline-item.cjs",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"showMore":[32],"isTall":[32]}]]]], options);
|
|
17
|
+
return index.bootstrapLazy([["limebb-date-range.cjs",[[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]}]]],["limebb-feed.cjs",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker.cjs",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget.cjs",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker.cjs",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker.cjs",[[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]}]]],["limebb-navigation-button.cjs",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker.cjs",[[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]}]]],["limebb-feed-timeline-item.cjs",[[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]}]]]], options);
|
|
18
18
|
});
|
|
19
19
|
};
|
|
20
20
|
|
|
@@ -116,7 +116,6 @@
|
|
|
116
116
|
|
|
117
117
|
.header {
|
|
118
118
|
display: flex;
|
|
119
|
-
align-items: center;
|
|
120
119
|
gap: 0.25rem;
|
|
121
120
|
padding-bottom: 0.25rem;
|
|
122
121
|
margin-top: -0.25rem;
|
|
@@ -136,6 +135,64 @@
|
|
|
136
135
|
overflow: hidden;
|
|
137
136
|
white-space: nowrap;
|
|
138
137
|
}
|
|
138
|
+
.heading.expanded-heading {
|
|
139
|
+
white-space: normal;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
button.expand-heading {
|
|
143
|
+
all: unset;
|
|
144
|
+
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
|
|
145
|
+
cursor: pointer;
|
|
146
|
+
color: rgb(var(--color-blue-default));
|
|
147
|
+
background-color: transparent;
|
|
148
|
+
border-radius: 1rem;
|
|
149
|
+
padding: 0 0.25rem 0.25rem 0.25rem;
|
|
150
|
+
height: 1rem;
|
|
151
|
+
white-space: nowrap;
|
|
152
|
+
}
|
|
153
|
+
button.expand-heading:hover {
|
|
154
|
+
color: rgb(var(--color-blue-default));
|
|
155
|
+
background-color: var(--lime-elevated-surface-background-color);
|
|
156
|
+
box-shadow: var(--button-shadow-hovered);
|
|
157
|
+
}
|
|
158
|
+
button.expand-heading:active {
|
|
159
|
+
box-shadow: var(--button-shadow-pressed);
|
|
160
|
+
transform: translate3d(0, 0.08rem, 0);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
button.collapse-heading {
|
|
164
|
+
all: unset;
|
|
165
|
+
transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
|
|
166
|
+
cursor: pointer;
|
|
167
|
+
color: var(--mdc-theme-on-surface);
|
|
168
|
+
background-color: var(--lime-elevated-surface-background-color);
|
|
169
|
+
box-shadow: var(--button-shadow-normal);
|
|
170
|
+
flex-shrink: 0;
|
|
171
|
+
display: flex;
|
|
172
|
+
align-items: center;
|
|
173
|
+
justify-content: center;
|
|
174
|
+
border-radius: 1.5rem;
|
|
175
|
+
width: 1rem;
|
|
176
|
+
}
|
|
177
|
+
button.collapse-heading:hover {
|
|
178
|
+
color: var(--mdc-theme-on-surface);
|
|
179
|
+
background-color: var(--lime-elevated-surface-background-color);
|
|
180
|
+
box-shadow: var(--button-shadow-hovered);
|
|
181
|
+
}
|
|
182
|
+
button.collapse-heading:active {
|
|
183
|
+
box-shadow: var(--button-shadow-pressed);
|
|
184
|
+
transform: translate3d(0, 0.08rem, 0);
|
|
185
|
+
}
|
|
186
|
+
button.collapse-heading:focus {
|
|
187
|
+
outline: none;
|
|
188
|
+
}
|
|
189
|
+
button.collapse-heading:focus-visible {
|
|
190
|
+
outline: none;
|
|
191
|
+
box-shadow: var(--shadow-depth-8-focused);
|
|
192
|
+
}
|
|
193
|
+
button.collapse-heading limel-icon {
|
|
194
|
+
width: 0.75rem;
|
|
195
|
+
}
|
|
139
196
|
|
|
140
197
|
.unpromoted-actions-menu {
|
|
141
198
|
position: absolute;
|
|
@@ -23,6 +23,14 @@ export class FeedTimelineItem {
|
|
|
23
23
|
* and the markdown content in the body of the
|
|
24
24
|
* feed item is expanded.
|
|
25
25
|
*/
|
|
26
|
+
this.headingCanExpand = false;
|
|
27
|
+
/**
|
|
28
|
+
* Will be toggled, when the "More" / "Less" button in the "header" is clicked.
|
|
29
|
+
*/
|
|
30
|
+
this.isHeadingExpanded = false;
|
|
31
|
+
/**
|
|
32
|
+
* Will be toggled when the "Show more" / "Show less" button is clicked.
|
|
33
|
+
*/
|
|
26
34
|
this.showMore = false;
|
|
27
35
|
/**
|
|
28
36
|
* Will be set to true, when the markdown content in the body of the
|
|
@@ -31,7 +39,7 @@ export class FeedTimelineItem {
|
|
|
31
39
|
* as well as adding certain visual effects.
|
|
32
40
|
*/
|
|
33
41
|
this.isTall = false;
|
|
34
|
-
this.
|
|
42
|
+
this.collapsibleButtonId = 'a' + crypto.randomUUID();
|
|
35
43
|
this.bodyTextTall = (entries) => {
|
|
36
44
|
if (!(entries === null || entries === void 0 ? void 0 : entries.length)) {
|
|
37
45
|
return;
|
|
@@ -48,7 +56,7 @@ export class FeedTimelineItem {
|
|
|
48
56
|
(!this.item.author && !this.item.heading)) {
|
|
49
57
|
return;
|
|
50
58
|
}
|
|
51
|
-
return (h("div", {
|
|
59
|
+
return (h("div", { class: "header" }, this.renderAuthor(), this.renderHeading(), this.renderExpandCollapseHeadingButton()));
|
|
52
60
|
};
|
|
53
61
|
this.renderRelations = () => {
|
|
54
62
|
var _a, _b, _c;
|
|
@@ -57,12 +65,32 @@ export class FeedTimelineItem {
|
|
|
57
65
|
}
|
|
58
66
|
return h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
|
|
59
67
|
};
|
|
68
|
+
this.renderExpandCollapseHeadingButton = () => {
|
|
69
|
+
var _a, _b;
|
|
70
|
+
if (!this.item.heading || !this.headingCanExpand) {
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
if (!this.isHeadingExpanded) {
|
|
74
|
+
return [
|
|
75
|
+
h("button", { onClick: this.toggleHeadingExpansion, class: "expand-heading" }, (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get('webclient.more')),
|
|
76
|
+
];
|
|
77
|
+
}
|
|
78
|
+
if (this.isHeadingExpanded) {
|
|
79
|
+
return [
|
|
80
|
+
h("button", { onClick: this.toggleHeadingExpansion, id: this.collapsibleButtonId, class: "collapse-heading" }, h("limel-icon", { name: "angle_up" })),
|
|
81
|
+
h("limel-tooltip", { elementId: this.collapsibleButtonId, label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.show-less'), openDirection: "top-end" }),
|
|
82
|
+
];
|
|
83
|
+
}
|
|
84
|
+
};
|
|
60
85
|
this.setBodyTextElement = (element) => {
|
|
61
86
|
this.bodyTextElement = element;
|
|
62
87
|
};
|
|
63
88
|
this.toggleShowMore = () => {
|
|
64
89
|
this.showMore = !this.showMore;
|
|
65
90
|
};
|
|
91
|
+
this.toggleHeadingExpansion = () => {
|
|
92
|
+
this.isHeadingExpanded = !this.isHeadingExpanded;
|
|
93
|
+
};
|
|
66
94
|
this.createMenuItem = (action) => {
|
|
67
95
|
var _a, _b;
|
|
68
96
|
if ('separator' in action) {
|
|
@@ -113,6 +141,12 @@ export class FeedTimelineItem {
|
|
|
113
141
|
};
|
|
114
142
|
}
|
|
115
143
|
componentDidLoad() {
|
|
144
|
+
var _a, _b;
|
|
145
|
+
const headingElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.heading');
|
|
146
|
+
const headingParagraphElement = (_b = headingElement === null || headingElement === void 0 ? void 0 : headingElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('p');
|
|
147
|
+
if (headingParagraphElement) {
|
|
148
|
+
this.headingCanExpand = this.isTextTruncated(headingParagraphElement);
|
|
149
|
+
}
|
|
116
150
|
if (!this.bodyTextElement) {
|
|
117
151
|
return;
|
|
118
152
|
}
|
|
@@ -129,6 +163,7 @@ export class FeedTimelineItem {
|
|
|
129
163
|
'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
|
|
130
164
|
'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
|
|
131
165
|
'shows-less': !this.showMore,
|
|
166
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
132
167
|
'shows-more': this.showMore,
|
|
133
168
|
'is-tall': this.isTall,
|
|
134
169
|
}, style: {
|
|
@@ -179,32 +214,13 @@ export class FeedTimelineItem {
|
|
|
179
214
|
return;
|
|
180
215
|
}
|
|
181
216
|
return [
|
|
182
|
-
h("limel-markdown", { class:
|
|
183
|
-
|
|
217
|
+
h("limel-markdown", { class: {
|
|
218
|
+
heading: true,
|
|
219
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
220
|
+
'truncate-paragraphs': !this.isHeadingExpanded,
|
|
221
|
+
}, value: this.item.heading }),
|
|
184
222
|
];
|
|
185
223
|
}
|
|
186
|
-
getHeaderTooltipLabel() {
|
|
187
|
-
var _a;
|
|
188
|
-
const author = (_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name;
|
|
189
|
-
const heading = this.extractPlainText(this.item.heading);
|
|
190
|
-
if (!author) {
|
|
191
|
-
return heading;
|
|
192
|
-
}
|
|
193
|
-
const authorName = typeof author === 'object' ? author.text : author;
|
|
194
|
-
return `${authorName} ${heading}`;
|
|
195
|
-
}
|
|
196
|
-
extractPlainText(markdown) {
|
|
197
|
-
// This function is used to convert markdown syntax to pla in text.
|
|
198
|
-
// We would like to display a normal sentence in the tooltip,
|
|
199
|
-
// instead of displaying the raw markdown syntax.
|
|
200
|
-
// For example, it turns '[link text](url)' into 'link text'.
|
|
201
|
-
return markdown
|
|
202
|
-
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // replace link syntax
|
|
203
|
-
.replace(/\*\*(.*?)\*\*/g, '$1') // replace bold syntax (**bold**)
|
|
204
|
-
.replace(/__(.*?)__/g, '$1') // replace bold syntax (__bold__)
|
|
205
|
-
.replace(/\*(.*?)\*/g, '$1') // replace italic syntax (*italic*)
|
|
206
|
-
.replace(/_(.*?)_/g, '$1'); // replace italic syntax (_italic_)
|
|
207
|
-
}
|
|
208
224
|
renderValue() {
|
|
209
225
|
if (!this.item.value) {
|
|
210
226
|
return;
|
|
@@ -213,6 +229,9 @@ export class FeedTimelineItem {
|
|
|
213
229
|
h("div", { class: "markdown-container" }, h("limel-markdown", { class: "body-text", value: this.item.value, ref: this.setBodyTextElement }), this.renderShowMoreButton()),
|
|
214
230
|
];
|
|
215
231
|
}
|
|
232
|
+
isTextTruncated(element) {
|
|
233
|
+
return element.offsetWidth < element.scrollWidth;
|
|
234
|
+
}
|
|
216
235
|
renderShowMoreButton() {
|
|
217
236
|
if (!this.isTall) {
|
|
218
237
|
return;
|
|
@@ -383,6 +402,8 @@ export class FeedTimelineItem {
|
|
|
383
402
|
}
|
|
384
403
|
static get states() {
|
|
385
404
|
return {
|
|
405
|
+
"headingCanExpand": {},
|
|
406
|
+
"isHeadingExpanded": {},
|
|
386
407
|
"showMore": {},
|
|
387
408
|
"isTall": {}
|
|
388
409
|
};
|
|
@@ -18,6 +18,7 @@ const MINUTES_OF_PROXIMITY = 5;
|
|
|
18
18
|
* @exampleComponent limebb-example-feed-author
|
|
19
19
|
* @exampleComponent limebb-example-feed-author-picture
|
|
20
20
|
* @exampleComponent limebb-example-feed-item-heading
|
|
21
|
+
* @exampleComponent limebb-example-feed-item-long-heading
|
|
21
22
|
* @exampleComponent limebb-example-feed-unpromoted-actions
|
|
22
23
|
* @exampleComponent limebb-example-feed-promoted-actions
|
|
23
24
|
* @exampleComponent limebb-example-feed-relations
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
2
|
import { P as PlatformServiceName } from './types.js';
|
|
3
3
|
|
|
4
|
-
const feedTimelineItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:\"\";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;
|
|
4
|
+
const feedTimelineItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:\"\";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;gap:0.25rem;padding-bottom:0.25rem;margin-top:-0.25rem;color:rgb(var(--contrast-900));font-size:0.875rem}:host(.has-unpromoted-actions) .header{padding-right:2rem}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.heading{flex-grow:1;overflow:hidden;white-space:nowrap}.heading.expanded-heading{white-space:normal}button.expand-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:rgb(var(--color-blue-default));background-color:transparent;border-radius:1rem;padding:0 0.25rem 0.25rem 0.25rem;height:1rem;white-space:nowrap}button.expand-heading:hover{color:rgb(var(--color-blue-default));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.expand-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:1.5rem;width:1rem}button.collapse-heading:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.collapse-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading:focus{outline:none}button.collapse-heading:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.collapse-heading limel-icon{width:0.75rem}.unpromoted-actions-menu{position:absolute;top:0;right:0}.timestamp{transition:color 0.4s ease, opacity 0.2s ease;transition-delay:var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;text-align:center;color:rgb(var(--contrast-800));background-color:var(--limebb-feed-background-color);padding:0.125rem 0}.icon{--icon-background-color:var(--limebb-feed-background-color);width:2rem;padding:0.125rem}:host(.has-author-picture) .icon{width:1.5rem}img{border-radius:50%;width:2rem;height:2rem;object-fit:cover;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}limel-action-bar{--action-bar-item-height:1.75rem;transition:opacity 0.2s ease;justify-content:flex-start;opacity:0.8}.action-bar{display:grid;transition:grid-template-rows var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-feed-item-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay);padding-bottom:0.5rem}:host(limebb-feed-timeline-item:hover) .action-bar,:host(limebb-feed-timeline-item:focus-within) .action-bar,:host(limebb-feed-timeline-item:focus-visible) .action-bar{--limebb-feed-item-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-feed-timeline-item:hover) limel-action-bar,:host(limebb-feed-timeline-item:focus-within) limel-action-bar,:host(limebb-feed-timeline-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-feed-timeline-item:hover){--limebb-feed-item-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-feed-item-action-bar-grid-template-rows-transition-delay:0.5s}:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{min-height:10.25rem}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:\"\";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{transition:grid-template-rows calc(var(--body-text-height) * 1.2ms) cubic-bezier(1, 0.09, 0, 0.89);position:relative;display:grid}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}:host(limebb-feed-timeline-item[ui=standard]) .content{background-color:rgb(var(--limebb-feed-item-background-color))}:host(limebb-feed-timeline-item[ui=emphasized]) .content{border:1px dashed rgb(var(--contrast-800))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown{--markdown-hyperlink-color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown:hover{--markdown-hyperlink-color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) a.author{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .header:hover a.author{color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) .icon{color:rgb(var(--contrast-900)) !important}:host(limebb-feed-timeline-item[ui=minimal]) .body-text{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .body-text:hover{color:rgb(var(--contrast-1100))}.content{position:relative}.content:before,.content:after{content:\"\";position:absolute;top:1rem;bottom:1rem;left:-0.125rem;width:0.25rem;border-radius:0.25rem}.content:before{background-color:var(--color-code)}:host(limebb-feed-timeline-item[type=external]) .content:before,:host(limebb-feed-timeline-item[type=external]) .content:after{left:calc(-0.125rem - 0.5px)}:host(limebb-feed-timeline-item[type=system]) .content:before{opacity:0.25}:host(limebb-feed-timeline-item[type=system]) .content:after{opacity:0.5;background:repeating-linear-gradient(45deg, var(--color-code), var(--color-code) 0.5rem, transparent 0.5rem, transparent 1rem);background-size:0.25rem 100%;background-repeat:repeat-y;background-position:left;rotate:180deg}";
|
|
5
5
|
|
|
6
6
|
const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
7
7
|
constructor() {
|
|
@@ -24,6 +24,14 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
24
24
|
* and the markdown content in the body of the
|
|
25
25
|
* feed item is expanded.
|
|
26
26
|
*/
|
|
27
|
+
this.headingCanExpand = false;
|
|
28
|
+
/**
|
|
29
|
+
* Will be toggled, when the "More" / "Less" button in the "header" is clicked.
|
|
30
|
+
*/
|
|
31
|
+
this.isHeadingExpanded = false;
|
|
32
|
+
/**
|
|
33
|
+
* Will be toggled when the "Show more" / "Show less" button is clicked.
|
|
34
|
+
*/
|
|
27
35
|
this.showMore = false;
|
|
28
36
|
/**
|
|
29
37
|
* Will be set to true, when the markdown content in the body of the
|
|
@@ -32,7 +40,7 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
32
40
|
* as well as adding certain visual effects.
|
|
33
41
|
*/
|
|
34
42
|
this.isTall = false;
|
|
35
|
-
this.
|
|
43
|
+
this.collapsibleButtonId = 'a' + crypto.randomUUID();
|
|
36
44
|
this.bodyTextTall = (entries) => {
|
|
37
45
|
if (!(entries === null || entries === void 0 ? void 0 : entries.length)) {
|
|
38
46
|
return;
|
|
@@ -49,7 +57,7 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
49
57
|
(!this.item.author && !this.item.heading)) {
|
|
50
58
|
return;
|
|
51
59
|
}
|
|
52
|
-
return (h("div", {
|
|
60
|
+
return (h("div", { class: "header" }, this.renderAuthor(), this.renderHeading(), this.renderExpandCollapseHeadingButton()));
|
|
53
61
|
};
|
|
54
62
|
this.renderRelations = () => {
|
|
55
63
|
var _a, _b, _c;
|
|
@@ -58,12 +66,32 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
58
66
|
}
|
|
59
67
|
return h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
|
|
60
68
|
};
|
|
69
|
+
this.renderExpandCollapseHeadingButton = () => {
|
|
70
|
+
var _a, _b;
|
|
71
|
+
if (!this.item.heading || !this.headingCanExpand) {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
if (!this.isHeadingExpanded) {
|
|
75
|
+
return [
|
|
76
|
+
h("button", { onClick: this.toggleHeadingExpansion, class: "expand-heading" }, (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get('webclient.more')),
|
|
77
|
+
];
|
|
78
|
+
}
|
|
79
|
+
if (this.isHeadingExpanded) {
|
|
80
|
+
return [
|
|
81
|
+
h("button", { onClick: this.toggleHeadingExpansion, id: this.collapsibleButtonId, class: "collapse-heading" }, h("limel-icon", { name: "angle_up" })),
|
|
82
|
+
h("limel-tooltip", { elementId: this.collapsibleButtonId, label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.show-less'), openDirection: "top-end" }),
|
|
83
|
+
];
|
|
84
|
+
}
|
|
85
|
+
};
|
|
61
86
|
this.setBodyTextElement = (element) => {
|
|
62
87
|
this.bodyTextElement = element;
|
|
63
88
|
};
|
|
64
89
|
this.toggleShowMore = () => {
|
|
65
90
|
this.showMore = !this.showMore;
|
|
66
91
|
};
|
|
92
|
+
this.toggleHeadingExpansion = () => {
|
|
93
|
+
this.isHeadingExpanded = !this.isHeadingExpanded;
|
|
94
|
+
};
|
|
67
95
|
this.createMenuItem = (action) => {
|
|
68
96
|
var _a, _b;
|
|
69
97
|
if ('separator' in action) {
|
|
@@ -114,6 +142,12 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
114
142
|
};
|
|
115
143
|
}
|
|
116
144
|
componentDidLoad() {
|
|
145
|
+
var _a, _b;
|
|
146
|
+
const headingElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.heading');
|
|
147
|
+
const headingParagraphElement = (_b = headingElement === null || headingElement === void 0 ? void 0 : headingElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('p');
|
|
148
|
+
if (headingParagraphElement) {
|
|
149
|
+
this.headingCanExpand = this.isTextTruncated(headingParagraphElement);
|
|
150
|
+
}
|
|
117
151
|
if (!this.bodyTextElement) {
|
|
118
152
|
return;
|
|
119
153
|
}
|
|
@@ -130,6 +164,7 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
130
164
|
'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
|
|
131
165
|
'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
|
|
132
166
|
'shows-less': !this.showMore,
|
|
167
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
133
168
|
'shows-more': this.showMore,
|
|
134
169
|
'is-tall': this.isTall,
|
|
135
170
|
}, style: {
|
|
@@ -180,32 +215,13 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
180
215
|
return;
|
|
181
216
|
}
|
|
182
217
|
return [
|
|
183
|
-
h("limel-markdown", { class:
|
|
184
|
-
|
|
218
|
+
h("limel-markdown", { class: {
|
|
219
|
+
heading: true,
|
|
220
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
221
|
+
'truncate-paragraphs': !this.isHeadingExpanded,
|
|
222
|
+
}, value: this.item.heading }),
|
|
185
223
|
];
|
|
186
224
|
}
|
|
187
|
-
getHeaderTooltipLabel() {
|
|
188
|
-
var _a;
|
|
189
|
-
const author = (_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name;
|
|
190
|
-
const heading = this.extractPlainText(this.item.heading);
|
|
191
|
-
if (!author) {
|
|
192
|
-
return heading;
|
|
193
|
-
}
|
|
194
|
-
const authorName = typeof author === 'object' ? author.text : author;
|
|
195
|
-
return `${authorName} ${heading}`;
|
|
196
|
-
}
|
|
197
|
-
extractPlainText(markdown) {
|
|
198
|
-
// This function is used to convert markdown syntax to pla in text.
|
|
199
|
-
// We would like to display a normal sentence in the tooltip,
|
|
200
|
-
// instead of displaying the raw markdown syntax.
|
|
201
|
-
// For example, it turns '[link text](url)' into 'link text'.
|
|
202
|
-
return markdown
|
|
203
|
-
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // replace link syntax
|
|
204
|
-
.replace(/\*\*(.*?)\*\*/g, '$1') // replace bold syntax (**bold**)
|
|
205
|
-
.replace(/__(.*?)__/g, '$1') // replace bold syntax (__bold__)
|
|
206
|
-
.replace(/\*(.*?)\*/g, '$1') // replace italic syntax (*italic*)
|
|
207
|
-
.replace(/_(.*?)_/g, '$1'); // replace italic syntax (_italic_)
|
|
208
|
-
}
|
|
209
225
|
renderValue() {
|
|
210
226
|
if (!this.item.value) {
|
|
211
227
|
return;
|
|
@@ -214,6 +230,9 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
214
230
|
h("div", { class: "markdown-container" }, h("limel-markdown", { class: "body-text", value: this.item.value, ref: this.setBodyTextElement }), this.renderShowMoreButton()),
|
|
215
231
|
];
|
|
216
232
|
}
|
|
233
|
+
isTextTruncated(element) {
|
|
234
|
+
return element.offsetWidth < element.scrollWidth;
|
|
235
|
+
}
|
|
217
236
|
renderShowMoreButton() {
|
|
218
237
|
if (!this.isTall) {
|
|
219
238
|
return;
|
|
@@ -272,6 +291,8 @@ const FeedTimelineItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
|
|
|
272
291
|
"item": [16],
|
|
273
292
|
"ui": [513],
|
|
274
293
|
"isBundled": [516, "is-bundled"],
|
|
294
|
+
"headingCanExpand": [32],
|
|
295
|
+
"isHeadingExpanded": [32],
|
|
275
296
|
"showMore": [32],
|
|
276
297
|
"isTall": [32]
|
|
277
298
|
}]);
|
|
@@ -13,5 +13,5 @@ const patchBrowser = () => {
|
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
patchBrowser().then(options => {
|
|
16
|
-
return bootstrapLazy([["limebb-date-range",[[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]}]]],["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker",[[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]}]]],["limebb-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker",[[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]}]]],["limebb-feed-timeline-item",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"showMore":[32],"isTall":[32]}]]]], options);
|
|
16
|
+
return bootstrapLazy([["limebb-date-range",[[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]}]]],["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker",[[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]}]]],["limebb-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker",[[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]}]]],["limebb-feed-timeline-item",[[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]}]]]], options);
|
|
17
17
|
});
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { r as registerInstance, h, H as Host, g as getElement } from './index-9d94fec9.js';
|
|
2
2
|
import { P as PlatformServiceName } from './types-737832ab.js';
|
|
3
3
|
|
|
4
|
-
const feedTimelineItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:\"\";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;
|
|
4
|
+
const feedTimelineItemCss = "@charset \"UTF-8\";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:\"\";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;gap:0.25rem;padding-bottom:0.25rem;margin-top:-0.25rem;color:rgb(var(--contrast-900));font-size:0.875rem}:host(.has-unpromoted-actions) .header{padding-right:2rem}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.heading{flex-grow:1;overflow:hidden;white-space:nowrap}.heading.expanded-heading{white-space:normal}button.expand-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:rgb(var(--color-blue-default));background-color:transparent;border-radius:1rem;padding:0 0.25rem 0.25rem 0.25rem;height:1rem;white-space:nowrap}button.expand-heading:hover{color:rgb(var(--color-blue-default));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.expand-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:1.5rem;width:1rem}button.collapse-heading:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.collapse-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading:focus{outline:none}button.collapse-heading:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.collapse-heading limel-icon{width:0.75rem}.unpromoted-actions-menu{position:absolute;top:0;right:0}.timestamp{transition:color 0.4s ease, opacity 0.2s ease;transition-delay:var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;text-align:center;color:rgb(var(--contrast-800));background-color:var(--limebb-feed-background-color);padding:0.125rem 0}.icon{--icon-background-color:var(--limebb-feed-background-color);width:2rem;padding:0.125rem}:host(.has-author-picture) .icon{width:1.5rem}img{border-radius:50%;width:2rem;height:2rem;object-fit:cover;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}limel-action-bar{--action-bar-item-height:1.75rem;transition:opacity 0.2s ease;justify-content:flex-start;opacity:0.8}.action-bar{display:grid;transition:grid-template-rows var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-feed-item-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay);padding-bottom:0.5rem}:host(limebb-feed-timeline-item:hover) .action-bar,:host(limebb-feed-timeline-item:focus-within) .action-bar,:host(limebb-feed-timeline-item:focus-visible) .action-bar{--limebb-feed-item-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-feed-timeline-item:hover) limel-action-bar,:host(limebb-feed-timeline-item:focus-within) limel-action-bar,:host(limebb-feed-timeline-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-feed-timeline-item:hover){--limebb-feed-item-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-feed-item-action-bar-grid-template-rows-transition-delay:0.5s}:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{min-height:10.25rem}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:\"\";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{transition:grid-template-rows calc(var(--body-text-height) * 1.2ms) cubic-bezier(1, 0.09, 0, 0.89);position:relative;display:grid}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}:host(limebb-feed-timeline-item[ui=standard]) .content{background-color:rgb(var(--limebb-feed-item-background-color))}:host(limebb-feed-timeline-item[ui=emphasized]) .content{border:1px dashed rgb(var(--contrast-800))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown{--markdown-hyperlink-color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown:hover{--markdown-hyperlink-color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) a.author{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .header:hover a.author{color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) .icon{color:rgb(var(--contrast-900)) !important}:host(limebb-feed-timeline-item[ui=minimal]) .body-text{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .body-text:hover{color:rgb(var(--contrast-1100))}.content{position:relative}.content:before,.content:after{content:\"\";position:absolute;top:1rem;bottom:1rem;left:-0.125rem;width:0.25rem;border-radius:0.25rem}.content:before{background-color:var(--color-code)}:host(limebb-feed-timeline-item[type=external]) .content:before,:host(limebb-feed-timeline-item[type=external]) .content:after{left:calc(-0.125rem - 0.5px)}:host(limebb-feed-timeline-item[type=system]) .content:before{opacity:0.25}:host(limebb-feed-timeline-item[type=system]) .content:after{opacity:0.5;background:repeating-linear-gradient(45deg, var(--color-code), var(--color-code) 0.5rem, transparent 0.5rem, transparent 1rem);background-size:0.25rem 100%;background-repeat:repeat-y;background-position:left;rotate:180deg}";
|
|
5
5
|
|
|
6
6
|
const FeedTimelineItem = class {
|
|
7
7
|
constructor(hostRef) {
|
|
@@ -22,6 +22,14 @@ const FeedTimelineItem = class {
|
|
|
22
22
|
* and the markdown content in the body of the
|
|
23
23
|
* feed item is expanded.
|
|
24
24
|
*/
|
|
25
|
+
this.headingCanExpand = false;
|
|
26
|
+
/**
|
|
27
|
+
* Will be toggled, when the "More" / "Less" button in the "header" is clicked.
|
|
28
|
+
*/
|
|
29
|
+
this.isHeadingExpanded = false;
|
|
30
|
+
/**
|
|
31
|
+
* Will be toggled when the "Show more" / "Show less" button is clicked.
|
|
32
|
+
*/
|
|
25
33
|
this.showMore = false;
|
|
26
34
|
/**
|
|
27
35
|
* Will be set to true, when the markdown content in the body of the
|
|
@@ -30,7 +38,7 @@ const FeedTimelineItem = class {
|
|
|
30
38
|
* as well as adding certain visual effects.
|
|
31
39
|
*/
|
|
32
40
|
this.isTall = false;
|
|
33
|
-
this.
|
|
41
|
+
this.collapsibleButtonId = 'a' + crypto.randomUUID();
|
|
34
42
|
this.bodyTextTall = (entries) => {
|
|
35
43
|
if (!(entries === null || entries === void 0 ? void 0 : entries.length)) {
|
|
36
44
|
return;
|
|
@@ -47,7 +55,7 @@ const FeedTimelineItem = class {
|
|
|
47
55
|
(!this.item.author && !this.item.heading)) {
|
|
48
56
|
return;
|
|
49
57
|
}
|
|
50
|
-
return (h("div", {
|
|
58
|
+
return (h("div", { class: "header" }, this.renderAuthor(), this.renderHeading(), this.renderExpandCollapseHeadingButton()));
|
|
51
59
|
};
|
|
52
60
|
this.renderRelations = () => {
|
|
53
61
|
var _a, _b, _c;
|
|
@@ -56,12 +64,32 @@ const FeedTimelineItem = class {
|
|
|
56
64
|
}
|
|
57
65
|
return h("limel-chip-set", { value: (_c = this.item) === null || _c === void 0 ? void 0 : _c.relations });
|
|
58
66
|
};
|
|
67
|
+
this.renderExpandCollapseHeadingButton = () => {
|
|
68
|
+
var _a, _b;
|
|
69
|
+
if (!this.item.heading || !this.headingCanExpand) {
|
|
70
|
+
return;
|
|
71
|
+
}
|
|
72
|
+
if (!this.isHeadingExpanded) {
|
|
73
|
+
return [
|
|
74
|
+
h("button", { onClick: this.toggleHeadingExpansion, class: "expand-heading" }, (_a = this.translator) === null || _a === void 0 ? void 0 : _a.get('webclient.more')),
|
|
75
|
+
];
|
|
76
|
+
}
|
|
77
|
+
if (this.isHeadingExpanded) {
|
|
78
|
+
return [
|
|
79
|
+
h("button", { onClick: this.toggleHeadingExpansion, id: this.collapsibleButtonId, class: "collapse-heading" }, h("limel-icon", { name: "angle_up" })),
|
|
80
|
+
h("limel-tooltip", { elementId: this.collapsibleButtonId, label: (_b = this.translator) === null || _b === void 0 ? void 0 : _b.get('webclient.show-less'), openDirection: "top-end" }),
|
|
81
|
+
];
|
|
82
|
+
}
|
|
83
|
+
};
|
|
59
84
|
this.setBodyTextElement = (element) => {
|
|
60
85
|
this.bodyTextElement = element;
|
|
61
86
|
};
|
|
62
87
|
this.toggleShowMore = () => {
|
|
63
88
|
this.showMore = !this.showMore;
|
|
64
89
|
};
|
|
90
|
+
this.toggleHeadingExpansion = () => {
|
|
91
|
+
this.isHeadingExpanded = !this.isHeadingExpanded;
|
|
92
|
+
};
|
|
65
93
|
this.createMenuItem = (action) => {
|
|
66
94
|
var _a, _b;
|
|
67
95
|
if ('separator' in action) {
|
|
@@ -112,6 +140,12 @@ const FeedTimelineItem = class {
|
|
|
112
140
|
};
|
|
113
141
|
}
|
|
114
142
|
componentDidLoad() {
|
|
143
|
+
var _a, _b;
|
|
144
|
+
const headingElement = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.heading');
|
|
145
|
+
const headingParagraphElement = (_b = headingElement === null || headingElement === void 0 ? void 0 : headingElement.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('p');
|
|
146
|
+
if (headingParagraphElement) {
|
|
147
|
+
this.headingCanExpand = this.isTextTruncated(headingParagraphElement);
|
|
148
|
+
}
|
|
115
149
|
if (!this.bodyTextElement) {
|
|
116
150
|
return;
|
|
117
151
|
}
|
|
@@ -128,6 +162,7 @@ const FeedTimelineItem = class {
|
|
|
128
162
|
'has-unpromoted-actions': !!((_a = this.item.unpromotedActions) === null || _a === void 0 ? void 0 : _a.length),
|
|
129
163
|
'has-author-picture': !!((_b = this.item.author) === null || _b === void 0 ? void 0 : _b.picture),
|
|
130
164
|
'shows-less': !this.showMore,
|
|
165
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
131
166
|
'shows-more': this.showMore,
|
|
132
167
|
'is-tall': this.isTall,
|
|
133
168
|
}, style: {
|
|
@@ -178,32 +213,13 @@ const FeedTimelineItem = class {
|
|
|
178
213
|
return;
|
|
179
214
|
}
|
|
180
215
|
return [
|
|
181
|
-
h("limel-markdown", { class:
|
|
182
|
-
|
|
216
|
+
h("limel-markdown", { class: {
|
|
217
|
+
heading: true,
|
|
218
|
+
'expanded-heading': this.isHeadingExpanded,
|
|
219
|
+
'truncate-paragraphs': !this.isHeadingExpanded,
|
|
220
|
+
}, value: this.item.heading }),
|
|
183
221
|
];
|
|
184
222
|
}
|
|
185
|
-
getHeaderTooltipLabel() {
|
|
186
|
-
var _a;
|
|
187
|
-
const author = (_a = this.item.author) === null || _a === void 0 ? void 0 : _a.name;
|
|
188
|
-
const heading = this.extractPlainText(this.item.heading);
|
|
189
|
-
if (!author) {
|
|
190
|
-
return heading;
|
|
191
|
-
}
|
|
192
|
-
const authorName = typeof author === 'object' ? author.text : author;
|
|
193
|
-
return `${authorName} ${heading}`;
|
|
194
|
-
}
|
|
195
|
-
extractPlainText(markdown) {
|
|
196
|
-
// This function is used to convert markdown syntax to pla in text.
|
|
197
|
-
// We would like to display a normal sentence in the tooltip,
|
|
198
|
-
// instead of displaying the raw markdown syntax.
|
|
199
|
-
// For example, it turns '[link text](url)' into 'link text'.
|
|
200
|
-
return markdown
|
|
201
|
-
.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // replace link syntax
|
|
202
|
-
.replace(/\*\*(.*?)\*\*/g, '$1') // replace bold syntax (**bold**)
|
|
203
|
-
.replace(/__(.*?)__/g, '$1') // replace bold syntax (__bold__)
|
|
204
|
-
.replace(/\*(.*?)\*/g, '$1') // replace italic syntax (*italic*)
|
|
205
|
-
.replace(/_(.*?)_/g, '$1'); // replace italic syntax (_italic_)
|
|
206
|
-
}
|
|
207
223
|
renderValue() {
|
|
208
224
|
if (!this.item.value) {
|
|
209
225
|
return;
|
|
@@ -212,6 +228,9 @@ const FeedTimelineItem = class {
|
|
|
212
228
|
h("div", { class: "markdown-container" }, h("limel-markdown", { class: "body-text", value: this.item.value, ref: this.setBodyTextElement }), this.renderShowMoreButton()),
|
|
213
229
|
];
|
|
214
230
|
}
|
|
231
|
+
isTextTruncated(element) {
|
|
232
|
+
return element.offsetWidth < element.scrollWidth;
|
|
233
|
+
}
|
|
215
234
|
renderShowMoreButton() {
|
|
216
235
|
if (!this.isTall) {
|
|
217
236
|
return;
|
package/dist/esm/loader.js
CHANGED
|
@@ -10,7 +10,7 @@ const patchEsm = () => {
|
|
|
10
10
|
const defineCustomElements = (win, options) => {
|
|
11
11
|
if (typeof window === 'undefined') return Promise.resolve();
|
|
12
12
|
return patchEsm().then(() => {
|
|
13
|
-
return bootstrapLazy([["limebb-date-range",[[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]}]]],["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker",[[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]}]]],["limebb-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker",[[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]}]]],["limebb-feed-timeline-item",[[1,"limebb-feed-timeline-item",{"platform":[16],"context":[16],"item":[16],"ui":[513],"isBundled":[516,"is-bundled"],"showMore":[32],"isTall":[32]}]]]], options);
|
|
13
|
+
return bootstrapLazy([["limebb-date-range",[[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]}]]],["limebb-feed",[[1,"limebb-feed",{"platform":[16],"context":[16],"items":[16],"emptyStateMessage":[1,"empty-state-message"],"loading":[4],"minutesOfProximity":[2,"minutes-of-proximity"],"totalCount":[2,"total-count"]}]]],["limebb-currency-picker",[[1,"limebb-currency-picker",{"label":[513],"platform":[16],"currencies":[16],"helperText":[513,"helper-text"],"required":[516],"readonly":[516],"invalid":[516],"disabled":[516],"value":[16]}]]],["limebb-dashboard-widget",[[1,"limebb-dashboard-widget",{"heading":[513],"subheading":[513],"supportingText":[513,"supporting-text"],"icon":[513]}]]],["limebb-icon-picker",[[1,"limebb-icon-picker",{"value":[1],"required":[4],"readonly":[4],"invalid":[4],"disabled":[4],"label":[1],"helperText":[1,"helper-text"]}]]],["limebb-locale-picker",[[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]}]]],["limebb-navigation-button",[[1,"limebb-navigation-button",{"href":[513],"tooltipLabel":[513,"tooltip-label"],"tooltipHelperLabel":[513,"tooltip-helper-label"],"type":[513]}]]],["limebb-date-picker",[[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]}]]],["limebb-feed-timeline-item",[[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]}]]]], options);
|
|
14
14
|
});
|
|
15
15
|
};
|
|
16
16
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{p as e,b as t}from"./p-2912b7e7.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-81bfe796",[[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-49c44234",[[1,"limebb-feed",{platform:[16],context:[16],items:[16],emptyStateMessage:[1,"empty-state-message"],loading:[4],minutesOfProximity:[2,"minutes-of-proximity"],totalCount:[2,"total-count"]}]]],["p-03d8633c",[[1,"limebb-currency-picker",{label:[513],platform:[16],currencies:[16],helperText:[513,"helper-text"],required:[516],readonly:[516],invalid:[516],disabled:[516],value:[16]}]]],["p-0f8928a9",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-a5310ead",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-317858e2",[[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-6ad70097",[[1,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-0ca85b0a",[[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-
|
|
1
|
+
import{p as e,b as t}from"./p-2912b7e7.js";(()=>{const t=import.meta.url,l={};return""!==t&&(l.resourcesUrl=new URL(".",t).href),e(l)})().then((e=>t([["p-81bfe796",[[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-49c44234",[[1,"limebb-feed",{platform:[16],context:[16],items:[16],emptyStateMessage:[1,"empty-state-message"],loading:[4],minutesOfProximity:[2,"minutes-of-proximity"],totalCount:[2,"total-count"]}]]],["p-03d8633c",[[1,"limebb-currency-picker",{label:[513],platform:[16],currencies:[16],helperText:[513,"helper-text"],required:[516],readonly:[516],invalid:[516],disabled:[516],value:[16]}]]],["p-0f8928a9",[[1,"limebb-dashboard-widget",{heading:[513],subheading:[513],supportingText:[513,"supporting-text"],icon:[513]}]]],["p-a5310ead",[[1,"limebb-icon-picker",{value:[1],required:[4],readonly:[4],invalid:[4],disabled:[4],label:[1],helperText:[1,"helper-text"]}]]],["p-317858e2",[[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-6ad70097",[[1,"limebb-navigation-button",{href:[513],tooltipLabel:[513,"tooltip-label"],tooltipHelperLabel:[513,"tooltip-helper-label"],type:[513]}]]],["p-0ca85b0a",[[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-2aee279b",[[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]}]]]],e)));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{r as e,h as t,H as i,g as o}from"./p-2912b7e7.js";import{P as r}from"./p-39d48976.js";const a=class{constructor(i){e(this,i),this.ui="standard",this.isBundled=!1,this.headingCanExpand=!1,this.isHeadingExpanded=!1,this.showMore=!1,this.isTall=!1,this.collapsibleButtonId="a"+crypto.randomUUID(),this.bodyTextTall=e=>{if(!(null==e?void 0:e.length))return;const t=e[0].contentRect.height;this.isTall=t>160,void 0===this.bodyTextHeight&&(this.bodyTextHeight=t)},this.renderHeader=()=>{if((!this.isBundled||this.item.heading)&&(this.item.author||this.item.heading))return t("div",{class:"header"},this.renderAuthor(),this.renderHeading(),this.renderExpandCollapseHeadingButton())},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 t("limel-chip-set",{value:null===(o=this.item)||void 0===o?void 0:o.relations})},this.renderExpandCollapseHeadingButton=()=>{var e,i;if(this.item.heading&&this.headingCanExpand)return this.isHeadingExpanded?this.isHeadingExpanded?[t("button",{onClick:this.toggleHeadingExpansion,id:this.collapsibleButtonId,class:"collapse-heading"},t("limel-icon",{name:"angle_up"})),t("limel-tooltip",{elementId:this.collapsibleButtonId,label:null===(i=this.translator)||void 0===i?void 0:i.get("webclient.show-less"),openDirection:"top-end"})]:void 0:[t("button",{onClick:this.toggleHeadingExpansion,class:"expand-heading"},null===(e=this.translator)||void 0===e?void 0:e.get("webclient.more"))]},this.setBodyTextElement=e=>{this.bodyTextElement=e},this.toggleShowMore=()=>{this.showMore=!this.showMore},this.toggleHeadingExpansion=()=>{this.isHeadingExpanded=!this.isHeadingExpanded},this.createMenuItem=e=>{var t,i;return"separator"in e?e:{value:e,text:null!==(t=e.label)&&void 0!==t?t:"",secondaryText:e.description,disabled:e.disabled,icon:null!==(i=e.icon)&&void 0!==i?i:""}},this.createActionBarItem=e=>{var t,i;if("separator"in e)return e;let o={value:e,text:null!==(t=e.label)&&void 0!==t?t:"",secondaryText:e.description,disabled:e.disabled};return!e.label&&e.icon?o=Object.assign(Object.assign({},o),{icon:e.icon,text:null!==(i=e.description)&&void 0!==i?i:o.text,iconOnly:!0}):e.icon&&(o=Object.assign(Object.assign({},o),{icon:e.icon})),o},this.handleMenuItemSelect=e=>{var t;e.stopPropagation();const i=null===(t=e.detail.value)||void 0===t?void 0:t.command;i&&this.commandbus.handle(i)},this.handleActionBarItemSelect=e=>{var t;e.stopPropagation();const i=null===(t=e.detail.value)||void 0===t?void 0:t.command;i&&this.commandbus.handle(i)}}componentDidLoad(){var e,t;const i=null===(e=this.el.shadowRoot)||void 0===e?void 0:e.querySelector(".heading"),o=null===(t=null==i?void 0:i.shadowRoot)||void 0===t?void 0:t.querySelector("p");o&&(this.headingCanExpand=this.isTextTruncated(o)),this.bodyTextElement&&(this.resizeObserver=new ResizeObserver(this.bodyTextTall),this.resizeObserver.observe(this.bodyTextElement))}disconnectedCallback(){var e;null===(e=this.resizeObserver)||void 0===e||e.disconnect()}render(){var e,o;return t(i,{id:this.item.id,class:{"has-unpromoted-actions":!!(null===(e=this.item.unpromotedActions)||void 0===e?void 0:e.length),"has-author-picture":!!(null===(o=this.item.author)||void 0===o?void 0:o.picture),"shows-less":!this.showMore,"expanded-heading":this.isHeadingExpanded,"shows-more":this.showMore,"is-tall":this.isTall},style:{"--body-text-height":`${this.bodyTextHeight}`,"--color-code":`${this.item.color}`}},this.renderBadgeAndTimestamp(),this.renderContent())}renderBadgeAndTimestamp(){return t("div",{class:"left"},t("div",{class:"info"},this.renderAuthorPicture(),this.renderIcon(),t("span",{class:"timestamp"},this.renderTimestamp())))}renderIcon(){var e,i,o,r,a;if(!this.isBundled&&(this.item.icon||!(null===(e=this.item.author)||void 0===e?void 0:e.picture)))return t("limel-icon",{class:"icon",badge:!0,name:null!==(o=null===(i=this.item.icon)||void 0===i?void 0:i.name)&&void 0!==o?o:"dot_circle",style:{color:`${null===(r=this.item.icon)||void 0===r?void 0:r.color}`,"background-color":`${null===(a=this.item.icon)||void 0===a?void 0:a.backgroundColor}`}})}renderContent(){return t("div",{class:"right"},t("div",{class:"content"},this.renderHeader(),this.renderUnpromotedActionsMenu(),this.renderValue(),this.renderRelations()),this.renderPromotedActions())}renderAuthor(){if(this.item.author&&(!this.isBundled||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:e,title:i,text:o}=this.item.author.name;return t("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 t("img",{loading:"lazy",src:this.item.author.picture})}renderHeading(){if(this.item.heading)return[t("limel-markdown",{class:{heading:!0,"expanded-heading":this.isHeadingExpanded,"truncate-paragraphs":!this.isHeadingExpanded},value:this.item.heading})]}renderValue(){if(this.item.value)return[t("div",{class:"markdown-container"},t("limel-markdown",{class:"body-text",value:this.item.value,ref:this.setBodyTextElement}),this.renderShowMoreButton())]}isTextTruncated(e){return e.offsetWidth<e.scrollWidth}renderShowMoreButton(){if(this.isTall)return[t("button",{id:"show-more-button",type:"button",onClick:this.toggleShowMore},t("limel-icon",{name:"angle_down"})),t("limel-tooltip",{label:this.toggleShowMoreLabel(),elementId:"show-more-button",openDirection:"top"})]}toggleShowMoreLabel(){var e,t;return this.showMore?null===(e=this.translator)||void 0===e?void 0:e.get("webclient.show-less"):null===(t=this.translator)||void 0===t?void 0:t.get("webclient.show-more")}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 t("limel-menu",{class:"unpromoted-actions-menu",items:o,openDirection:"bottom-end",onSelect:this.handleMenuItemSelect},t("limel-icon-button",{icon:"menu_2",slot:"trigger",label:null===(i=this.translator)||void 0===i?void 0:i.get("webclient.more-actions")}))}renderPromotedActions(){var e;if(!(null===(e=this.item.promotedActions)||void 0===e?void 0:e.length))return;const i=this.item.promotedActions.map(this.createActionBarItem);return t("div",{class:"action-bar"},t("div",{class:"action-bar-hider"},t("limel-action-bar",{accessibleLabel:"Action bar",actions:i,layout:"fullWidth",onItemSelected:this.handleActionBarItemSelect})))}renderTimestamp(){const e=this.item.timestamp;if(e)return this.dateTimeFormatter.format(e,"timeofday")}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(r.Translate)}get commandbus(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(r.CommandBus)}get el(){return o(this)}};a.style='@charset "UTF-8";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:"";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;gap:0.25rem;padding-bottom:0.25rem;margin-top:-0.25rem;color:rgb(var(--contrast-900));font-size:0.875rem}:host(.has-unpromoted-actions) .header{padding-right:2rem}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.heading{flex-grow:1;overflow:hidden;white-space:nowrap}.heading.expanded-heading{white-space:normal}button.expand-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:rgb(var(--color-blue-default));background-color:transparent;border-radius:1rem;padding:0 0.25rem 0.25rem 0.25rem;height:1rem;white-space:nowrap}button.expand-heading:hover{color:rgb(var(--color-blue-default));background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.expand-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:1.5rem;width:1rem}button.collapse-heading:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button.collapse-heading:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}button.collapse-heading:focus{outline:none}button.collapse-heading:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.collapse-heading limel-icon{width:0.75rem}.unpromoted-actions-menu{position:absolute;top:0;right:0}.timestamp{transition:color 0.4s ease, opacity 0.2s ease;transition-delay:var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;text-align:center;color:rgb(var(--contrast-800));background-color:var(--limebb-feed-background-color);padding:0.125rem 0}.icon{--icon-background-color:var(--limebb-feed-background-color);width:2rem;padding:0.125rem}:host(.has-author-picture) .icon{width:1.5rem}img{border-radius:50%;width:2rem;height:2rem;object-fit:cover;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}limel-action-bar{--action-bar-item-height:1.75rem;transition:opacity 0.2s ease;justify-content:flex-start;opacity:0.8}.action-bar{display:grid;transition:grid-template-rows var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-feed-item-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay);padding-bottom:0.5rem}:host(limebb-feed-timeline-item:hover) .action-bar,:host(limebb-feed-timeline-item:focus-within) .action-bar,:host(limebb-feed-timeline-item:focus-visible) .action-bar{--limebb-feed-item-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-feed-timeline-item:hover) limel-action-bar,:host(limebb-feed-timeline-item:focus-within) limel-action-bar,:host(limebb-feed-timeline-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-feed-timeline-item:hover){--limebb-feed-item-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-feed-item-action-bar-grid-template-rows-transition-delay:0.5s}:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{min-height:10.25rem}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:"";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{transition:grid-template-rows calc(var(--body-text-height) * 1.2ms) cubic-bezier(1, 0.09, 0, 0.89);position:relative;display:grid}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}:host(limebb-feed-timeline-item[ui=standard]) .content{background-color:rgb(var(--limebb-feed-item-background-color))}:host(limebb-feed-timeline-item[ui=emphasized]) .content{border:1px dashed rgb(var(--contrast-800))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown{--markdown-hyperlink-color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown:hover{--markdown-hyperlink-color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) a.author{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .header:hover a.author{color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) .icon{color:rgb(var(--contrast-900)) !important}:host(limebb-feed-timeline-item[ui=minimal]) .body-text{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .body-text:hover{color:rgb(var(--contrast-1100))}.content{position:relative}.content:before,.content:after{content:"";position:absolute;top:1rem;bottom:1rem;left:-0.125rem;width:0.25rem;border-radius:0.25rem}.content:before{background-color:var(--color-code)}:host(limebb-feed-timeline-item[type=external]) .content:before,:host(limebb-feed-timeline-item[type=external]) .content:after{left:calc(-0.125rem - 0.5px)}:host(limebb-feed-timeline-item[type=system]) .content:before{opacity:0.25}:host(limebb-feed-timeline-item[type=system]) .content:after{opacity:0.5;background:repeating-linear-gradient(45deg, var(--color-code), var(--color-code) 0.5rem, transparent 0.5rem, transparent 1rem);background-size:0.25rem 100%;background-repeat:repeat-y;background-position:left;rotate:180deg}';export{a as limebb_feed_timeline_item}
|
|
@@ -34,6 +34,14 @@ export declare class FeedTimelineItem implements LimeWebComponent {
|
|
|
34
34
|
* and the markdown content in the body of the
|
|
35
35
|
* feed item is expanded.
|
|
36
36
|
*/
|
|
37
|
+
private headingCanExpand;
|
|
38
|
+
/**
|
|
39
|
+
* Will be toggled, when the "More" / "Less" button in the "header" is clicked.
|
|
40
|
+
*/
|
|
41
|
+
private isHeadingExpanded;
|
|
42
|
+
/**
|
|
43
|
+
* Will be toggled when the "Show more" / "Show less" button is clicked.
|
|
44
|
+
*/
|
|
37
45
|
private showMore;
|
|
38
46
|
/**
|
|
39
47
|
* Will be set to true, when the markdown content in the body of the
|
|
@@ -46,7 +54,7 @@ export declare class FeedTimelineItem implements LimeWebComponent {
|
|
|
46
54
|
private bodyTextElement;
|
|
47
55
|
private resizeObserver;
|
|
48
56
|
private bodyTextHeight;
|
|
49
|
-
private
|
|
57
|
+
private collapsibleButtonId;
|
|
50
58
|
componentDidLoad(): void;
|
|
51
59
|
disconnectedCallback(): void;
|
|
52
60
|
private bodyTextTall;
|
|
@@ -59,13 +67,14 @@ export declare class FeedTimelineItem implements LimeWebComponent {
|
|
|
59
67
|
private renderAuthor;
|
|
60
68
|
private renderAuthorPicture;
|
|
61
69
|
private renderHeading;
|
|
62
|
-
private
|
|
63
|
-
private extractPlainText;
|
|
70
|
+
private renderExpandCollapseHeadingButton;
|
|
64
71
|
private renderValue;
|
|
72
|
+
private isTextTruncated;
|
|
65
73
|
private setBodyTextElement;
|
|
66
74
|
private renderShowMoreButton;
|
|
67
75
|
private toggleShowMoreLabel;
|
|
68
76
|
private toggleShowMore;
|
|
77
|
+
private toggleHeadingExpansion;
|
|
69
78
|
private renderUnpromotedActionsMenu;
|
|
70
79
|
private createMenuItem;
|
|
71
80
|
private renderPromotedActions;
|
|
@@ -17,6 +17,7 @@ import { LimeWebComponent, LimeWebComponentContext, LimeWebComponentPlatform } f
|
|
|
17
17
|
* @exampleComponent limebb-example-feed-author
|
|
18
18
|
* @exampleComponent limebb-example-feed-author-picture
|
|
19
19
|
* @exampleComponent limebb-example-feed-item-heading
|
|
20
|
+
* @exampleComponent limebb-example-feed-item-long-heading
|
|
20
21
|
* @exampleComponent limebb-example-feed-unpromoted-actions
|
|
21
22
|
* @exampleComponent limebb-example-feed-promoted-actions
|
|
22
23
|
* @exampleComponent limebb-example-feed-relations
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@limetech/lime-crm-building-blocks",
|
|
3
|
-
"version": "1.31.
|
|
3
|
+
"version": "1.31.3",
|
|
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",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"access": "public"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@limetech/lime-elements": "^37.11.
|
|
44
|
+
"@limetech/lime-elements": "^37.11.4",
|
|
45
45
|
"@limetech/lime-web-components": "^5.27.0",
|
|
46
46
|
"@lundalogik/lime-icons8": "^2.19.0",
|
|
47
47
|
"@lundalogik/limeclient.js": "^1.61.0",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{r as e,h as t,H as i,g as o}from"./p-2912b7e7.js";import{P as r}from"./p-39d48976.js";const a=class{constructor(i){e(this,i),this.ui="standard",this.isBundled=!1,this.showMore=!1,this.isTall=!1,this.headerId="a"+crypto.randomUUID(),this.bodyTextTall=e=>{if(!(null==e?void 0:e.length))return;const t=e[0].contentRect.height;this.isTall=t>160,void 0===this.bodyTextHeight&&(this.bodyTextHeight=t)},this.renderHeader=()=>{if((!this.isBundled||this.item.heading)&&(this.item.author||this.item.heading))return t("div",{id:this.headerId,class:"header"},this.renderAuthor(),this.renderHeading())},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 t("limel-chip-set",{value:null===(o=this.item)||void 0===o?void 0:o.relations})},this.setBodyTextElement=e=>{this.bodyTextElement=e},this.toggleShowMore=()=>{this.showMore=!this.showMore},this.createMenuItem=e=>{var t,i;return"separator"in e?e:{value:e,text:null!==(t=e.label)&&void 0!==t?t:"",secondaryText:e.description,disabled:e.disabled,icon:null!==(i=e.icon)&&void 0!==i?i:""}},this.createActionBarItem=e=>{var t,i;if("separator"in e)return e;let o={value:e,text:null!==(t=e.label)&&void 0!==t?t:"",secondaryText:e.description,disabled:e.disabled};return!e.label&&e.icon?o=Object.assign(Object.assign({},o),{icon:e.icon,text:null!==(i=e.description)&&void 0!==i?i:o.text,iconOnly:!0}):e.icon&&(o=Object.assign(Object.assign({},o),{icon:e.icon})),o},this.handleMenuItemSelect=e=>{var t;e.stopPropagation();const i=null===(t=e.detail.value)||void 0===t?void 0:t.command;i&&this.commandbus.handle(i)},this.handleActionBarItemSelect=e=>{var t;e.stopPropagation();const i=null===(t=e.detail.value)||void 0===t?void 0:t.command;i&&this.commandbus.handle(i)}}componentDidLoad(){this.bodyTextElement&&(this.resizeObserver=new ResizeObserver(this.bodyTextTall),this.resizeObserver.observe(this.bodyTextElement))}disconnectedCallback(){var e;null===(e=this.resizeObserver)||void 0===e||e.disconnect()}render(){var e,o;return t(i,{id:this.item.id,class:{"has-unpromoted-actions":!!(null===(e=this.item.unpromotedActions)||void 0===e?void 0:e.length),"has-author-picture":!!(null===(o=this.item.author)||void 0===o?void 0:o.picture),"shows-less":!this.showMore,"shows-more":this.showMore,"is-tall":this.isTall},style:{"--body-text-height":`${this.bodyTextHeight}`,"--color-code":`${this.item.color}`}},this.renderBadgeAndTimestamp(),this.renderContent())}renderBadgeAndTimestamp(){return t("div",{class:"left"},t("div",{class:"info"},this.renderAuthorPicture(),this.renderIcon(),t("span",{class:"timestamp"},this.renderTimestamp())))}renderIcon(){var e,i,o,r,a;if(!this.isBundled&&(this.item.icon||!(null===(e=this.item.author)||void 0===e?void 0:e.picture)))return t("limel-icon",{class:"icon",badge:!0,name:null!==(o=null===(i=this.item.icon)||void 0===i?void 0:i.name)&&void 0!==o?o:"dot_circle",style:{color:`${null===(r=this.item.icon)||void 0===r?void 0:r.color}`,"background-color":`${null===(a=this.item.icon)||void 0===a?void 0:a.backgroundColor}`}})}renderContent(){return t("div",{class:"right"},t("div",{class:"content"},this.renderHeader(),this.renderUnpromotedActionsMenu(),this.renderValue(),this.renderRelations()),this.renderPromotedActions())}renderAuthor(){if(this.item.author&&(!this.isBundled||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:e,title:i,text:o}=this.item.author.name;return t("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 t("img",{loading:"lazy",src:this.item.author.picture})}renderHeading(){if(this.item.heading)return[t("limel-markdown",{class:"heading truncate-paragraphs",value:this.item.heading}),t("limel-tooltip",{elementId:this.headerId,label:this.getHeaderTooltipLabel(),openDirection:"top-start"})]}getHeaderTooltipLabel(){var e;const t=null===(e=this.item.author)||void 0===e?void 0:e.name,i=this.extractPlainText(this.item.heading);return t?`${"object"==typeof t?t.text:t} ${i}`:i}extractPlainText(e){return e.replace(/\[([^\]]+)\]\([^)]+\)/g,"$1").replace(/\*\*(.*?)\*\*/g,"$1").replace(/__(.*?)__/g,"$1").replace(/\*(.*?)\*/g,"$1").replace(/_(.*?)_/g,"$1")}renderValue(){if(this.item.value)return[t("div",{class:"markdown-container"},t("limel-markdown",{class:"body-text",value:this.item.value,ref:this.setBodyTextElement}),this.renderShowMoreButton())]}renderShowMoreButton(){if(this.isTall)return[t("button",{id:"show-more-button",type:"button",onClick:this.toggleShowMore},t("limel-icon",{name:"angle_down"})),t("limel-tooltip",{label:this.toggleShowMoreLabel(),elementId:"show-more-button",openDirection:"top"})]}toggleShowMoreLabel(){var e,t;return this.showMore?null===(e=this.translator)||void 0===e?void 0:e.get("webclient.show-less"):null===(t=this.translator)||void 0===t?void 0:t.get("webclient.show-more")}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 t("limel-menu",{class:"unpromoted-actions-menu",items:o,openDirection:"bottom-end",onSelect:this.handleMenuItemSelect},t("limel-icon-button",{icon:"menu_2",slot:"trigger",label:null===(i=this.translator)||void 0===i?void 0:i.get("webclient.more-actions")}))}renderPromotedActions(){var e;if(!(null===(e=this.item.promotedActions)||void 0===e?void 0:e.length))return;const i=this.item.promotedActions.map(this.createActionBarItem);return t("div",{class:"action-bar"},t("div",{class:"action-bar-hider"},t("limel-action-bar",{accessibleLabel:"Action bar",actions:i,layout:"fullWidth",onItemSelected:this.handleActionBarItemSelect})))}renderTimestamp(){const e=this.item.timestamp;if(e)return this.dateTimeFormatter.format(e,"timeofday")}get dateTimeFormatter(){return this.platform.get(r.DateTimeFormatter)}get translator(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(r.Translate)}get commandbus(){var e;return null===(e=this.platform)||void 0===e?void 0:e.get(r.CommandBus)}get el(){return o(this)}};a.style='@charset "UTF-8";*{box-sizing:border-box}:host(limebb-feed-timeline-item){--limebb-feed-item-paddings:0.75rem;display:flex;gap:0.75rem;position:relative;isolation:isolate}:host(limebb-feed-timeline-item:hover) .timestamp{color:rgb(var(--contrast-1100))}:host(limebb-feed-timeline-item[is-bundled]:hover){--limebb-feed-item-timestamp-opacity-delay:0.5s}:host(limebb-feed-timeline-item[is-bundled]:hover) .timestamp{opacity:1}:host(limebb-feed-timeline-item[is-bundled]) .timestamp{opacity:0}.left:before{content:"";position:absolute;z-index:0;top:-0.25rem;bottom:-0.25rem;left:1rem;width:1px;background-color:rgb(var(--contrast-600));z-index:-1}.info{position:sticky;top:0.5rem;display:flex;flex-direction:column;align-items:center;gap:0.25rem}.right,.content{display:flex;flex-direction:column;flex-grow:1;min-width:0}.content{border-radius:1rem;gap:0.25rem;padding:var(--limebb-feed-item-paddings)}.header{display:flex;align-items:center;gap:0.25rem;padding-bottom:0.25rem;margin-top:-0.25rem;color:rgb(var(--contrast-900));font-size:0.875rem}:host(.has-unpromoted-actions) .header{padding-right:2rem}.header limel-markdown{--markdown-hyperlink-color:var(--mdc-theme-primary);--markdown-hyperlink-color--hovered:rgb(var(--color-teal-light))}.heading{flex-grow:1;overflow:hidden;white-space:nowrap}.unpromoted-actions-menu{position:absolute;top:0;right:0}.timestamp{transition:color 0.4s ease, opacity 0.2s ease;transition-delay:var(--limebb-feed-item-timestamp-opacity-delay, 0s);font-size:0.75rem;text-align:center;color:rgb(var(--contrast-800));background-color:var(--limebb-feed-background-color);padding:0.125rem 0}.icon{--icon-background-color:var(--limebb-feed-background-color);width:2rem;padding:0.125rem}:host(.has-author-picture) .icon{width:1.5rem}img{border-radius:50%;width:2rem;height:2rem;object-fit:cover;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}limel-action-bar{--action-bar-item-height:1.75rem;transition:opacity 0.2s ease;justify-content:flex-start;opacity:0.8}.action-bar{display:grid;transition:grid-template-rows var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed, 0.2s) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay, 0s);grid-template-rows:var(--limebb-feed-item-action-bar-grid-template-rows, 1fr)}.action-bar-hider{overflow:hidden}limel-action-bar{transition:padding var(--limebb-feed-item-action-bar-grid-template-rows-transition-speed) cubic-bezier(1, 0.09, 0, 0.89) var(--limebb-feed-item-action-bar-grid-template-rows-transition-delay);padding-bottom:0.5rem}:host(limebb-feed-timeline-item:hover) .action-bar,:host(limebb-feed-timeline-item:focus-within) .action-bar,:host(limebb-feed-timeline-item:focus-visible) .action-bar{--limebb-feed-item-action-bar-grid-template-rows:1fr;will-change:grid-template-rows}:host(limebb-feed-timeline-item:hover) limel-action-bar,:host(limebb-feed-timeline-item:focus-within) limel-action-bar,:host(limebb-feed-timeline-item:focus-visible) limel-action-bar{will-change:opacity;opacity:1}:host(limebb-feed-timeline-item:hover){--limebb-feed-item-action-bar-grid-template-rows-transition-speed:0.46s;--limebb-feed-item-action-bar-grid-template-rows-transition-delay:0.5s}:host(limebb-feed-timeline-item.is-tall) .markdown-container{margin-bottom:0.5rem}:host(limebb-feed-timeline-item.is-tall) .body-text{min-height:10.25rem}:host(limebb-feed-timeline-item.is-tall) .body-text:after{transition:opacity 0.6s ease;content:"";opacity:0.26;pointer-events:none;position:absolute;bottom:-0.125rem;right:-0.125rem;left:-0.125rem;height:2.5rem;background:radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0)) 0 100%, linear-gradient(to bottom, rgb(var(--limebb-feed-item-background-color), 0) 0%, rgb(var(--limebb-feed-item-background-color), 90%) 100%);background-repeat:no-repeat;background-size:100% 0.5rem, 100% 100%}:host(limebb-feed-timeline-item.is-tall.shows-less) .markdown-container{grid-template-rows:0fr}:host(limebb-feed-timeline-item.is-tall.shows-less) .body-text:after{opacity:1}:host(limebb-feed-timeline-item.is-tall.shows-more) .markdown-container{grid-template-rows:1fr}:host(limebb-feed-timeline-item.is-tall.shows-more) #show-more-button limel-icon{rotate:180deg}.markdown-container{transition:grid-template-rows calc(var(--body-text-height) * 1.2ms) cubic-bezier(1, 0.09, 0, 0.89);position:relative;display:grid}.body-text{display:block;overflow:hidden}#show-more-button{all:unset;transition:color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;cursor:pointer;color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal);z-index:1;position:absolute;right:0;bottom:-0.6rem;left:0;margin:0 auto;display:flex;align-items:center;justify-content:center;border-radius:3rem;width:2rem;height:1rem}#show-more-button:hover{color:var(--mdc-theme-on-surface);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}#show-more-button:active{box-shadow:var(--button-shadow-pressed);transform:translate3d(0, 0.08rem, 0)}#show-more-button:focus{outline:none}#show-more-button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}#show-more-button limel-icon{transition:rotate 0.2s ease 0.5s;color:var(--mdc-theme-primary);width:0.75rem}:host(limebb-feed-timeline-item[ui=standard]) .content{background-color:rgb(var(--limebb-feed-item-background-color))}:host(limebb-feed-timeline-item[ui=emphasized]) .content{border:1px dashed rgb(var(--contrast-800))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown{--markdown-hyperlink-color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) limel-markdown:hover{--markdown-hyperlink-color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) a.author{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .header:hover a.author{color:rgb(var(--color-blue-default))}:host(limebb-feed-timeline-item[ui=minimal]) .icon{color:rgb(var(--contrast-900)) !important}:host(limebb-feed-timeline-item[ui=minimal]) .body-text{color:rgb(var(--contrast-900))}:host(limebb-feed-timeline-item[ui=minimal]) .body-text:hover{color:rgb(var(--contrast-1100))}.content{position:relative}.content:before,.content:after{content:"";position:absolute;top:1rem;bottom:1rem;left:-0.125rem;width:0.25rem;border-radius:0.25rem}.content:before{background-color:var(--color-code)}:host(limebb-feed-timeline-item[type=external]) .content:before,:host(limebb-feed-timeline-item[type=external]) .content:after{left:calc(-0.125rem - 0.5px)}:host(limebb-feed-timeline-item[type=system]) .content:before{opacity:0.25}:host(limebb-feed-timeline-item[type=system]) .content:after{opacity:0.5;background:repeating-linear-gradient(45deg, var(--color-code), var(--color-code) 0.5rem, transparent 0.5rem, transparent 1rem);background-size:0.25rem 100%;background-repeat:repeat-y;background-position:left;rotate:180deg}';export{a as limebb_feed_timeline_item}
|