@kubex/zinc 1.1.19 → 1.1.20
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/dist/custom-elements.json +74 -74
- package/dist/vscode.html-custom-data.json +11 -11
- package/dist/web-types.json +23 -23
- package/dist/zn.min.js +2 -2
- package/package.json +1 -1
- package/src/components/chat-message/chat-message.component.ts +1 -1
- package/src/components/chat-message/chat-message.scss +12 -3
|
@@ -47,6 +47,79 @@
|
|
|
47
47
|
}
|
|
48
48
|
]
|
|
49
49
|
},
|
|
50
|
+
{
|
|
51
|
+
"kind": "javascript-module",
|
|
52
|
+
"path": "components/action-bar/action-bar.js",
|
|
53
|
+
"declarations": [
|
|
54
|
+
{
|
|
55
|
+
"kind": "class",
|
|
56
|
+
"description": "",
|
|
57
|
+
"name": "ZnActionBar",
|
|
58
|
+
"cssProperties": [
|
|
59
|
+
{
|
|
60
|
+
"description": "An example CSS custom property.",
|
|
61
|
+
"name": "--example"
|
|
62
|
+
}
|
|
63
|
+
],
|
|
64
|
+
"cssParts": [
|
|
65
|
+
{
|
|
66
|
+
"description": "The component's base wrapper.",
|
|
67
|
+
"name": "base"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"slots": [
|
|
71
|
+
{
|
|
72
|
+
"description": "The default slot.",
|
|
73
|
+
"name": ""
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"description": "An example slot.",
|
|
77
|
+
"name": "example"
|
|
78
|
+
}
|
|
79
|
+
],
|
|
80
|
+
"members": [
|
|
81
|
+
{
|
|
82
|
+
"kind": "field",
|
|
83
|
+
"name": "localize",
|
|
84
|
+
"privacy": "private",
|
|
85
|
+
"readonly": true,
|
|
86
|
+
"default": "new LocalizeController(this)"
|
|
87
|
+
}
|
|
88
|
+
],
|
|
89
|
+
"events": [
|
|
90
|
+
{
|
|
91
|
+
"description": "Emitted as an example.",
|
|
92
|
+
"name": "zn-event-name"
|
|
93
|
+
}
|
|
94
|
+
],
|
|
95
|
+
"superclass": {
|
|
96
|
+
"name": "ZincElement",
|
|
97
|
+
"module": "/src/internal/zinc-element"
|
|
98
|
+
},
|
|
99
|
+
"summary": "Short summary of the component's intended use.",
|
|
100
|
+
"tagNameWithoutPrefix": "action-bar",
|
|
101
|
+
"tagName": "zn-action-bar",
|
|
102
|
+
"customElement": true,
|
|
103
|
+
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
104
|
+
"documentation": "https://zinc.style/components/action-bar",
|
|
105
|
+
"status": "experimental",
|
|
106
|
+
"since": "1.0",
|
|
107
|
+
"dependencies": [
|
|
108
|
+
"zn-example"
|
|
109
|
+
]
|
|
110
|
+
}
|
|
111
|
+
],
|
|
112
|
+
"exports": [
|
|
113
|
+
{
|
|
114
|
+
"kind": "js",
|
|
115
|
+
"name": "default",
|
|
116
|
+
"declaration": {
|
|
117
|
+
"name": "ZnActionBar",
|
|
118
|
+
"module": "components/action-bar/action-bar.js"
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
]
|
|
122
|
+
},
|
|
50
123
|
{
|
|
51
124
|
"kind": "javascript-module",
|
|
52
125
|
"path": "components/alert/alert.js",
|
|
@@ -223,79 +296,6 @@
|
|
|
223
296
|
}
|
|
224
297
|
]
|
|
225
298
|
},
|
|
226
|
-
{
|
|
227
|
-
"kind": "javascript-module",
|
|
228
|
-
"path": "components/action-bar/action-bar.js",
|
|
229
|
-
"declarations": [
|
|
230
|
-
{
|
|
231
|
-
"kind": "class",
|
|
232
|
-
"description": "",
|
|
233
|
-
"name": "ZnActionBar",
|
|
234
|
-
"cssProperties": [
|
|
235
|
-
{
|
|
236
|
-
"description": "An example CSS custom property.",
|
|
237
|
-
"name": "--example"
|
|
238
|
-
}
|
|
239
|
-
],
|
|
240
|
-
"cssParts": [
|
|
241
|
-
{
|
|
242
|
-
"description": "The component's base wrapper.",
|
|
243
|
-
"name": "base"
|
|
244
|
-
}
|
|
245
|
-
],
|
|
246
|
-
"slots": [
|
|
247
|
-
{
|
|
248
|
-
"description": "The default slot.",
|
|
249
|
-
"name": ""
|
|
250
|
-
},
|
|
251
|
-
{
|
|
252
|
-
"description": "An example slot.",
|
|
253
|
-
"name": "example"
|
|
254
|
-
}
|
|
255
|
-
],
|
|
256
|
-
"members": [
|
|
257
|
-
{
|
|
258
|
-
"kind": "field",
|
|
259
|
-
"name": "localize",
|
|
260
|
-
"privacy": "private",
|
|
261
|
-
"readonly": true,
|
|
262
|
-
"default": "new LocalizeController(this)"
|
|
263
|
-
}
|
|
264
|
-
],
|
|
265
|
-
"events": [
|
|
266
|
-
{
|
|
267
|
-
"description": "Emitted as an example.",
|
|
268
|
-
"name": "zn-event-name"
|
|
269
|
-
}
|
|
270
|
-
],
|
|
271
|
-
"superclass": {
|
|
272
|
-
"name": "ZincElement",
|
|
273
|
-
"module": "/src/internal/zinc-element"
|
|
274
|
-
},
|
|
275
|
-
"summary": "Short summary of the component's intended use.",
|
|
276
|
-
"tagNameWithoutPrefix": "action-bar",
|
|
277
|
-
"tagName": "zn-action-bar",
|
|
278
|
-
"customElement": true,
|
|
279
|
-
"jsDoc": "/**\n * @summary Short summary of the component's intended use.\n * @documentation https://zinc.style/components/action-bar\n * @status experimental\n * @since 1.0\n *\n * @dependency zn-example\n *\n * @event zn-event-name - Emitted as an example.\n *\n * @slot - The default slot.\n * @slot example - An example slot.\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --example - An example CSS custom property.\n */",
|
|
280
|
-
"documentation": "https://zinc.style/components/action-bar",
|
|
281
|
-
"status": "experimental",
|
|
282
|
-
"since": "1.0",
|
|
283
|
-
"dependencies": [
|
|
284
|
-
"zn-example"
|
|
285
|
-
]
|
|
286
|
-
}
|
|
287
|
-
],
|
|
288
|
-
"exports": [
|
|
289
|
-
{
|
|
290
|
-
"kind": "js",
|
|
291
|
-
"name": "default",
|
|
292
|
-
"declaration": {
|
|
293
|
-
"name": "ZnActionBar",
|
|
294
|
-
"module": "components/action-bar/action-bar.js"
|
|
295
|
-
}
|
|
296
|
-
}
|
|
297
|
-
]
|
|
298
|
-
},
|
|
299
299
|
{
|
|
300
300
|
"kind": "javascript-module",
|
|
301
301
|
"path": "components/animated-button/animated-button.js",
|
|
@@ -37155,7 +37155,7 @@
|
|
|
37155
37155
|
"package": {
|
|
37156
37156
|
"name": "@kubex/zinc",
|
|
37157
37157
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
37158
|
-
"version": "1.1.
|
|
37158
|
+
"version": "1.1.20",
|
|
37159
37159
|
"author": "",
|
|
37160
37160
|
"license": "MIT"
|
|
37161
37161
|
}
|
|
@@ -13,6 +13,17 @@
|
|
|
13
13
|
}
|
|
14
14
|
]
|
|
15
15
|
},
|
|
16
|
+
{
|
|
17
|
+
"name": "zn-action-bar",
|
|
18
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
19
|
+
"attributes": [],
|
|
20
|
+
"references": [
|
|
21
|
+
{
|
|
22
|
+
"name": "Documentation",
|
|
23
|
+
"url": "https://zinc.style/components/action-bar"
|
|
24
|
+
}
|
|
25
|
+
]
|
|
26
|
+
},
|
|
16
27
|
{
|
|
17
28
|
"name": "zn-alert",
|
|
18
29
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -52,17 +63,6 @@
|
|
|
52
63
|
}
|
|
53
64
|
]
|
|
54
65
|
},
|
|
55
|
-
{
|
|
56
|
-
"name": "zn-action-bar",
|
|
57
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
58
|
-
"attributes": [],
|
|
59
|
-
"references": [
|
|
60
|
-
{
|
|
61
|
-
"name": "Documentation",
|
|
62
|
-
"url": "https://zinc.style/components/action-bar"
|
|
63
|
-
}
|
|
64
|
-
]
|
|
65
|
-
},
|
|
66
66
|
{
|
|
67
67
|
"name": "zn-animated-button",
|
|
68
68
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@kubex/zinc",
|
|
4
|
-
"version": "1.1.
|
|
4
|
+
"version": "1.1.20",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,6 +15,28 @@
|
|
|
15
15
|
"events": [],
|
|
16
16
|
"js": { "properties": [], "events": [] }
|
|
17
17
|
},
|
|
18
|
+
{
|
|
19
|
+
"name": "zn-action-bar",
|
|
20
|
+
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
21
|
+
"doc-url": "",
|
|
22
|
+
"attributes": [],
|
|
23
|
+
"slots": [
|
|
24
|
+
{ "name": "", "description": "The default slot." },
|
|
25
|
+
{ "name": "example", "description": "An example slot." }
|
|
26
|
+
],
|
|
27
|
+
"events": [
|
|
28
|
+
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
29
|
+
],
|
|
30
|
+
"js": {
|
|
31
|
+
"properties": [],
|
|
32
|
+
"events": [
|
|
33
|
+
{
|
|
34
|
+
"name": "zn-event-name",
|
|
35
|
+
"description": "Emitted as an example."
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
18
40
|
{
|
|
19
41
|
"name": "zn-alert",
|
|
20
42
|
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
@@ -78,28 +100,6 @@
|
|
|
78
100
|
]
|
|
79
101
|
}
|
|
80
102
|
},
|
|
81
|
-
{
|
|
82
|
-
"name": "zn-action-bar",
|
|
83
|
-
"description": "Short summary of the component's intended use.\n---\n\n\n### **Events:**\n - **zn-event-name** - Emitted as an example.\n\n### **Slots:**\n - _default_ - The default slot.\n- **example** - An example slot.\n\n### **CSS Properties:**\n - **--example** - An example CSS custom property. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
|
|
84
|
-
"doc-url": "",
|
|
85
|
-
"attributes": [],
|
|
86
|
-
"slots": [
|
|
87
|
-
{ "name": "", "description": "The default slot." },
|
|
88
|
-
{ "name": "example", "description": "An example slot." }
|
|
89
|
-
],
|
|
90
|
-
"events": [
|
|
91
|
-
{ "name": "zn-event-name", "description": "Emitted as an example." }
|
|
92
|
-
],
|
|
93
|
-
"js": {
|
|
94
|
-
"properties": [],
|
|
95
|
-
"events": [
|
|
96
|
-
{
|
|
97
|
-
"name": "zn-event-name",
|
|
98
|
-
"description": "Emitted as an example."
|
|
99
|
-
}
|
|
100
|
-
]
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
103
|
{
|
|
104
104
|
"name": "zn-animated-button",
|
|
105
105
|
"description": "\n---\n\n\n### **Methods:**\n - **purchase(): _void_** - Programmatically trigger the purchase flow\n- **setSuccess(): _void_** - Set the button to success state manually\n- **setFailure(message): _void_** - Set the button to failure state manually with optional error message\n- **reset(): _void_** - Reset the button to idle state",
|
package/dist/zn.min.js
CHANGED
|
@@ -212,7 +212,7 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
212
212
|
class="${ae({"button-group":!0,"button-group--grow":this.grow,"button-group--start":this.start,"button-group--gap":this.gap})}"
|
|
213
213
|
role="group">
|
|
214
214
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
215
|
-
</div>`}};Yn.styles=Q(dce),_([w({})],Yn.prototype,"direction",2),_([w({type:Boolean})],Yn.prototype,"grow",2),_([w({type:Boolean})],Yn.prototype,"wrap",2),_([w({type:Boolean})],Yn.prototype,"start",2),_([w({type:Boolean})],Yn.prototype,"gap",2),_([ce("slot")],Yn.prototype,"defaultSlot",2);var Sp=Yn;Yn.define("zn-button-group");function sEe(a){return new DOMParser().parseFromString(a,"text/html").body}function lEe(a){a.querySelectorAll("script").forEach(r=>{r.remove()})}function dEe(a,r){return["src","href","xlink:href"].includes(a)&&(r.includes("javascript:")||r.includes("data:text/html"))?!0:a.startsWith("on")}function cEe(a){let r=a.attributes;for(let t=r.length-1;t>=0;t--)dEe(r[t].name,r[t].value)&&a.removeAttributeNode(r[t])}function cce(a){let r=a.children;for(let t=r.length-1;t>=0;t--){let i=r[t];cEe(i),cce(i)}}function fce(a){let r=sEe(a);return lEe(r),cce(r),r.innerHTML}var pce=J`@charset "UTF-8";@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block;padding-inline:calc(var(--zn-gutter,0) + var(--zn-base-gap,0))}.message{display:flex;gap:var(--zn-spacing-small);align-items:flex-start}.message__avatar{flex:0 0 36px;display:flex;justify-content:center}.message__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--zn-spacing-x-small)}.message__header{display:flex;align-items:center;gap:var(--zn-spacing-x-small);min-height:36px}.message__sender{font-family:var(--zn-font-sans);font-size:var(--zn-text-h1-font-size);font-weight:var(--zn-text-h1-font-weight);line-height:var(--zn-text-h1-line-height);color:var(--zn-text-h1-color);text-transform:var(--zn-text-h1-transform)}.message__time{font-family:var(--zn-font-sans);font-size:var(--zn-text-subheading-small-font-size);font-weight:var(--zn-text-subheading-small-font-weight);line-height:var(--zn-text-subheading-small-line-height);color:var(--zn-text-subheading-small-color);text-transform:var(--zn-text-subheading-small-transform)}.message__bubble{box-sizing:border-box;display:flex;align-items:flex-start;gap:var(--zn-spacing-small);padding:11px var(--zn-spacing-small);border-radius:var(--zn-border-radius);background:var(--message-
|
|
215
|
+
</div>`}};Yn.styles=Q(dce),_([w({})],Yn.prototype,"direction",2),_([w({type:Boolean})],Yn.prototype,"grow",2),_([w({type:Boolean})],Yn.prototype,"wrap",2),_([w({type:Boolean})],Yn.prototype,"start",2),_([w({type:Boolean})],Yn.prototype,"gap",2),_([ce("slot")],Yn.prototype,"defaultSlot",2);var Sp=Yn;Yn.define("zn-button-group");function sEe(a){return new DOMParser().parseFromString(a,"text/html").body}function lEe(a){a.querySelectorAll("script").forEach(r=>{r.remove()})}function dEe(a,r){return["src","href","xlink:href"].includes(a)&&(r.includes("javascript:")||r.includes("data:text/html"))?!0:a.startsWith("on")}function cEe(a){let r=a.attributes;for(let t=r.length-1;t>=0;t--)dEe(r[t].name,r[t].value)&&a.removeAttributeNode(r[t])}function cce(a){let r=a.children;for(let t=r.length-1;t>=0;t--){let i=r[t];cEe(i),cce(i)}}function fce(a){let r=sEe(a);return lEe(r),cce(r),r.innerHTML}var pce=J`@charset "UTF-8";@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:block;padding-inline:calc(var(--zn-gutter,0) + var(--zn-base-gap,0));--message-bubble-agent:rgba(4,114,225,0.1);--message-bubble-customer:rgba(48,170,61,0.1);--message-bubble-internal:rgba(255,203,0,0.1)}.message{display:flex;gap:var(--zn-spacing-small);align-items:flex-start}.message__avatar{flex:0 0 36px;display:flex;justify-content:center}.message__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--zn-spacing-x-small)}.message__header{display:flex;align-items:center;gap:var(--zn-spacing-x-small);min-height:36px}.message__sender{font-family:var(--zn-font-sans);font-size:var(--zn-text-h1-font-size);font-weight:var(--zn-text-h1-font-weight);line-height:var(--zn-text-h1-line-height);color:var(--zn-text-h1-color);text-transform:var(--zn-text-h1-transform)}.message__time{font-family:var(--zn-font-sans);font-size:var(--zn-text-subheading-small-font-size);font-weight:var(--zn-text-subheading-small-font-weight);line-height:var(--zn-text-subheading-small-line-height);color:var(--zn-text-subheading-small-color);text-transform:var(--zn-text-subheading-small-transform)}.message__bubble{box-sizing:border-box;display:flex;align-items:flex-start;gap:var(--zn-spacing-small);padding:11px var(--zn-spacing-small);border-radius:var(--zn-border-radius);background:var(--message-bubble-agent);min-height:46px}.message__bubble--sending{border:1px dashed rgb(var(--zn-border-color));opacity:0.7;flex-direction:column}.message__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--zn-spacing-small)}.message__attachments{display:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--zn-spacing-small)}.message__attachments--visible{display:flex}.message__attachments ::slotted(zn-chat-message-attachment){min-width:0}.message__content{font-family:var(--zn-font-sans);font-size:var(--zn-text-chat-font-size);font-weight:var(--zn-text-chat-font-weight);line-height:var(--zn-text-chat-line-height);color:var(--zn-text-chat-color);text-transform:var(--zn-text-chat-transform);flex:1 1 auto;min-width:0;overflow-wrap:anywhere}.message__content ::slotted(*){font-family:var(--zn-font-sans);font-size:var(--zn-text-chat-font-size);font-weight:var(--zn-text-chat-font-weight);line-height:var(--zn-text-chat-line-height);color:var(--zn-text-chat-color);text-transform:var(--zn-text-chat-transform)}.message__content p{margin:0;padding:0}.message__content pre{background-color:#23241f;border-radius:3px;margin-block:5px;padding:5px 10px;color:#f8f8f2;overflow:auto}.message__content blockquote{border-left:4px solid rgb(var(--zn-border-color));margin:5px 0;padding-left:16px}.message__content ol,.message__content ul{padding:0;margin:0}.message__content li{list-style-type:none;padding-left:1em;position:relative}.message__content ol{counter-reset:list-0 0}.message__content ol>li{counter-increment:list-0 1}.message__content ul>li::before{content:"•"}.message__content ol>li::before{content:counter(list-0) ". "}.message__content ol li::before,.message__content ul li::before{display:inline-block;margin-left:-1.5em;margin-right:0.3em;text-align:right;white-space:nowrap;width:1.2em}.message__content img{max-width:100%}.message__content a{color:rgb(var(--zn-color-info))}.message__meta{font-family:var(--zn-font-sans);font-size:var(--zn-text-subheading-small-font-size);font-weight:var(--zn-text-subheading-small-font-weight);line-height:var(--zn-text-subheading-small-line-height);color:var(--zn-text-subheading-small-color);text-transform:var(--zn-text-subheading-small-transform)}.message__actions{flex-shrink:0;display:flex;align-items:center}:host([agent-initiated]) .message__bubble{background:var(--message-background,var(--message-bubble-agent))}:host([customer-initiated]) .message__bubble{background:var(--message-background,var(--message-bubble-customer))}:host([action-type=internal]) .message__bubble{background:var(--message-background,var(--message-bubble-internal))}:host([action-type=error]) .message__bubble{background:var(--message-background,rgba(var(--zn-color-error),0.12))}:host(.message-continued) .message{margin-top:3px}:host(.message-continued) .message__avatar{visibility:hidden}:host(.message-continued) .message__header{display:none}.message--system{margin-top:var(--zn-spacing-x-small)}.system-card{box-sizing:border-box;display:flex;align-items:center;gap:var(--zn-spacing-x-small);padding:6px 12px;border-radius:var(--zn-border-radius);border:1px solid rgb(var(--zn-border-color));font-size:12px;color:rgb(var(--zn-text-color));min-height:46px}.system-card__text{font-family:var(--zn-font-sans);font-size:var(--zn-text-paragraph-font-size);font-weight:var(--zn-text-paragraph-font-weight);line-height:var(--zn-text-paragraph-line-height);color:var(--zn-text-paragraph-color);text-transform:var(--zn-text-paragraph-transform)}.system-card__time{font-family:var(--zn-font-sans);font-size:var(--zn-text-subheading-small-font-size);font-weight:var(--zn-text-subheading-small-font-weight);line-height:var(--zn-text-subheading-small-line-height);color:var(--zn-text-subheading-small-color);text-transform:var(--zn-text-subheading-small-transform);white-space:nowrap}`;var pi=class pi extends Y{constructor(){super(...arguments);this.sender="";this.message="";this.time="";this.avatar="";this.actionType="";this.customerInitiated=!1;this.agentInitiated=!1;this.hasAttachments=!1}connectedCallback(){var p;let t=!this.actionType||this.actionType==="internal",i=t&&this.agentInitiated,n=t&&this.customerInitiated,o=this.previousElementSibling,s=parseInt(this.time)-parseInt(o==null?void 0:o.time),l=(p=o==null?void 0:o.getAttribute("action-type"))!=null?p:"",d=pi.SYSTEM_ACTION_TYPES.includes(l),c=l==="internal",f=this.actionType==="internal";o&&!d&&s<60&&c===f&&(o!=null&&o.hasAttribute("agent-initiated")&&i||o!=null&&o.hasAttribute("customer-initiated")&&n)&&this.classList.add("message-continued"),super.connectedCallback()}render(){if(!pi.DISPLAYED_ACTION_TYPES.includes(this.actionType))return ze;if(this.isSystemMessage())return this.renderSystemCard();let t=this.actionType==="message-sending";return C`
|
|
216
216
|
<div part="base" class="message">
|
|
217
217
|
<div part="avatar" class="message__avatar">
|
|
218
218
|
<zn-icon library="avatar" src="${this.avatar||this.sender}" size="36" round></zn-icon>
|
|
@@ -252,7 +252,7 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
252
252
|
<span class="message__sender">${this.sender||(this.customerInitiated?"Customer":"You")}</span>
|
|
253
253
|
${this.time?C`<span class="message__time">${this.getSentTime()}</span>`:ze}
|
|
254
254
|
${this.actionType==="internal"?C`
|
|
255
|
-
<zn-chip type="info">Internal</zn-chip>`:ze}
|
|
255
|
+
<zn-chip type="info">Internal Note</zn-chip>`:ze}
|
|
256
256
|
<slot name="badge"></slot>
|
|
257
257
|
</div>`}renderContent(){if(!this.message)return C`
|
|
258
258
|
<slot></slot>`;let t=fce(this.message);return t=t.replace(/\r\n|\r|\n/g,"<br>"),t=t.replace(/\b(((https?|ftp|dict):\/\/|www\.)[^'">\s]+\.[^'">\s]+)(?=\s|$)(?!["<>])/g,'<a href="$1" target="_blank">$1</a>'),ci(t)}getTime(){return new Date(parseInt(this.time,10)*1e3).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})}getSentTime(){let t=new Date(parseInt(this.time,10)*1e3),i=t.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"});return t.getDate()!==new Date().getDate()?`${t.toLocaleDateString()} ${i}`:i}};pi.styles=Q(pce),pi.dependencies={"zn-icon":Yt},pi.SYSTEM_ACTION_TYPES=["connected.agent","attachment.added","transfer","ended","customer.ended","customer.connected","customer.disconnected"],pi.DISPLAYED_ACTION_TYPES=["","connected.agent","attachment.added","multi.answer","transfer","ended","error","customer.ended","message-sending","customer.connected","customer.disconnected","internal"],_([w()],pi.prototype,"sender",2),_([w()],pi.prototype,"message",2),_([w()],pi.prototype,"time",2),_([w()],pi.prototype,"avatar",2),_([w({attribute:"action-type",reflect:!0})],pi.prototype,"actionType",2),_([w({type:Boolean,reflect:!0,attribute:"customer-initiated"})],pi.prototype,"customerInitiated",2),_([w({type:Boolean,reflect:!0,attribute:"agent-initiated"})],pi.prototype,"agentInitiated",2),_([Ee()],pi.prototype,"hasAttachments",2);var qh=pi;var fEe=qh;qh.define("zn-chat-message");var uce=J`@keyframes rotate-gradient{from{--rotate:0deg}to{--rotate:360deg}}:host{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-transform:none}:host *,:host *::before,:host *::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:rgb(var(--zn-border-color))}[hidden]{display:none !important}.width-container,.form-container,.wide-form-container{height:100%;width:100%;margin:var(--zn-default-margin,0 auto)}.width-container{max-width:var(--zn-container)}.form-container{max-width:var(--zn-container-ph)}.wide-form-container{max-width:var(--zn-container-lg)}:host{display:inline-flex;min-width:0}.attachment{font-family:var(--zn-font-sans);font-size:var(--zn-text-paragraph-font-size);font-weight:var(--zn-text-paragraph-font-weight);line-height:var(--zn-text-paragraph-line-height);color:var(--zn-text-paragraph-color);text-transform:var(--zn-text-paragraph-transform);display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small);color:rgb(var(--zn-text));text-decoration:none;min-width:0}.attachment__icon{flex:0 0 auto}.attachment__label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment:hover .attachment__label{text-decoration:underline}`;var Xn=class extends Y{constructor(){super(...arguments);this.href="";this.name="";this.icon="paperclip@lu";this.target="_blank";this.download=!1}connectedCallback(){super.connectedCallback(),this.closest("zn-chat-message")?this.slot||(this.slot="attachments"):console.warn("<zn-chat-message-attachment> can only be used inside a <zn-chat-message>.",this)}render(){let t=this.target==="_blank";return C`
|
package/package.json
CHANGED
|
@@ -202,7 +202,7 @@ export default class ZnChatMessage extends ZincElement {
|
|
|
202
202
|
<span class="message__sender">${this.sender || (this.customerInitiated ? 'Customer' : 'You')}</span>
|
|
203
203
|
${this.time ? html`<span class="message__time">${this.getSentTime()}</span>` : nothing}
|
|
204
204
|
${this.actionType === 'internal' ? html`
|
|
205
|
-
<zn-chip type="info">Internal</zn-chip>` : nothing}
|
|
205
|
+
<zn-chip type="info">Internal Note</zn-chip>` : nothing}
|
|
206
206
|
<slot name="badge"></slot>
|
|
207
207
|
</div>`;
|
|
208
208
|
}
|
|
@@ -3,6 +3,11 @@
|
|
|
3
3
|
:host {
|
|
4
4
|
display: block;
|
|
5
5
|
padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
|
|
6
|
+
|
|
7
|
+
// Bubble tints by message origin / type (overridable per consumer).
|
|
8
|
+
--message-bubble-agent: rgba(4, 114, 225, 0.1);
|
|
9
|
+
--message-bubble-customer: rgba(48, 170, 61, 0.1);
|
|
10
|
+
--message-bubble-internal: rgba(255, 203, 0, 0.1);
|
|
6
11
|
}
|
|
7
12
|
|
|
8
13
|
.message {
|
|
@@ -46,7 +51,7 @@
|
|
|
46
51
|
gap: var(--zn-spacing-small);
|
|
47
52
|
padding: 11px var(--zn-spacing-small); // 11px top/bottom + 24px line = 46px base
|
|
48
53
|
border-radius: var(--zn-border-radius);
|
|
49
|
-
background: var(--message-
|
|
54
|
+
background: var(--message-bubble-agent);
|
|
50
55
|
min-height: 46px; // base (padding included); grows only when text wraps
|
|
51
56
|
|
|
52
57
|
&--sending {
|
|
@@ -171,11 +176,15 @@
|
|
|
171
176
|
|
|
172
177
|
// Bubble tints by message origin / type.
|
|
173
178
|
:host([agent-initiated]) .message__bubble {
|
|
174
|
-
background: var(--message-background,
|
|
179
|
+
background: var(--message-background, var(--message-bubble-agent));
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
:host([customer-initiated]) .message__bubble {
|
|
183
|
+
background: var(--message-background, var(--message-bubble-customer));
|
|
175
184
|
}
|
|
176
185
|
|
|
177
186
|
:host([action-type="internal"]) .message__bubble {
|
|
178
|
-
background: var(--message-background,
|
|
187
|
+
background: var(--message-background, var(--message-bubble-internal));
|
|
179
188
|
}
|
|
180
189
|
|
|
181
190
|
:host([action-type="error"]) .message__bubble {
|