@kubex/zinc 1.1.49 → 1.1.50
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/content-block/content-block.component.ts +1 -0
- package/src/components/content-block/content-block.scss +2 -12
|
@@ -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",
|
|
@@ -40623,7 +40623,7 @@
|
|
|
40623
40623
|
"package": {
|
|
40624
40624
|
"name": "@kubex/zinc",
|
|
40625
40625
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
40626
|
-
"version": "1.1.
|
|
40626
|
+
"version": "1.1.50",
|
|
40627
40627
|
"author": "",
|
|
40628
40628
|
"license": "MIT"
|
|
40629
40629
|
}
|
|
@@ -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.50",
|
|
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
|
@@ -3805,8 +3805,8 @@ ${ma(this.code(o,t))}
|
|
|
3805
3805
|
<zn-button icon="keyboard_arrow_down"></zn-button>
|
|
3806
3806
|
</zn-button-group>
|
|
3807
3807
|
</div>
|
|
3808
|
-
`}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(t){this._isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}get validity(){return this._isButton()&&this.button?this.button.validity:Se}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}_isButton(){return this.type==="submit"||this.type==="button"||this.type==="reset"}};$r.styles=E(C_),c([p()],$r.prototype,"caption",2),c([p()],$r.prototype,"href",2),c([p()],$r.prototype,"name",2),c([p()],$r.prototype,"value",2),c([fe()],$r.prototype,"defaultValue",2),c([p()],$r.prototype,"type",2),c([F("zn-dropdown")],$r.prototype,"dropdown",2),c([F("zn-button#trigger-btn")],$r.prototype,"button",2);var F6=$r;$r.define("zn-split-button");var E_=A`@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)}
|
|
3809
|
-
<div class="${N({"content-block--outbound":this.outbound,"content-block--short":this.short,"content-block--collapsible":!this.noCollapse})}">
|
|
3808
|
+
`}checkValidity(){return this._isButton()&&this.button?this.button.checkValidity():!0}getForm(){return this.formControlController.getForm()}reportValidity(){return this._isButton()&&this.button?this.button.reportValidity():!0}setCustomValidity(t){this._isButton()&&(this.button.setCustomValidity(t),this.formControlController.updateValidity())}get validity(){return this._isButton()&&this.button?this.button.validity:Se}get validationMessage(){return this._isButton()&&this.button?this.button.validationMessage:""}_isButton(){return this.type==="submit"||this.type==="button"||this.type==="reset"}};$r.styles=E(C_),c([p()],$r.prototype,"caption",2),c([p()],$r.prototype,"href",2),c([p()],$r.prototype,"name",2),c([p()],$r.prototype,"value",2),c([fe()],$r.prototype,"defaultValue",2),c([p()],$r.prototype,"type",2),c([F("zn-dropdown")],$r.prototype,"dropdown",2),c([F("zn-button#trigger-btn")],$r.prototype,"button",2);var F6=$r;$r.define("zn-split-button");var E_=A`@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)}.content-block{background-color:var(--zn-note-background,rgba(var(--zn-panel),var(--zn-panel-opacity)));border-bottom:1px solid rgb(var(--zn-border-color));padding-inline:calc(var(--zn-gutter,0) + var(--zn-base-gap,0))}.content-block-header{display:flex;align-items:center;gap:var(--zn-spacing-small);width:100%;max-width:100%;padding-block:var(--zn-spacing-small);position:relative}.content-block--collapsible .content-block-header{cursor:pointer}.content-block-header__icon{display:flex;align-items:center;flex-shrink:0}.content-block-header__main{display:flex;flex-direction:row;align-items:center;gap:var(--zn-spacing-small);min-width:0;flex-grow:1;overflow:hidden}.content-block-header__caption{font-weight:var(--zn-text-h1-font-weight);font-size:var(--zn-text-h1-font-size);color:rgba(var(--zn-text-panel-title),100%);line-height:var(--zn-icon-size,20px);margin:0;display:flex;align-items:center;gap:var(--zn-spacing-small);flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content-block-header__subject{flex:1 1 auto;min-width:0;font-size:var(--zn-font-size-medium);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content-block-header__subject--empty{opacity:0.5}.content-block-header__description{flex:1 1 auto;min-width:0;font-size:var(--zn-font-size-medium);color:rgb(var(--zn-text-muted));overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:none}.content-block-header__attachments{display:inline-flex;align-items:center;gap:var(--zn-spacing-2x-small);font-size:var(--zn-font-size-small);color:rgb(var(--zn-text-muted));flex-shrink:0;margin-left:auto}.content-block-header__actions{display:flex;align-items:center;gap:var(--zn-spacing-small);margin-left:auto;flex-shrink:0}.content-block__attachments{display:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--zn-spacing-small);padding-block-end:var(--zn-spacing-small)}.content-block__attachments--visible{display:flex}.content-block__attachments ::slotted(zn-chat-message-attachment){min-width:0}.content-block--short zn-sp,.content-block--short .content-block__attachments{display:none}.content-block--short .content-block-header__description{display:block}@container (max-width:599px){.content-block--short .content-block-header__description{display:none}}.text-section{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)}.text-section a{font-size:var(--zn-font-size-small);opacity:0.8}.hidden{display:none}ol{counter-reset:list-0 0}@supports (counter-set:none){ol li,ul li{counter-set:list-1 0 list-2 0 list-3 0 list-4 0 list-5 0 list-6 0 list-7 0 list-8 0 list-9 0}}ol,ul{padding:0;margin:0}li[data-list=checked]>.ql-ui,li[data-list=unchecked]>.ql-ui{color:#777}li{list-style-type:none;position:relative}ul>li::before{content:"•"}ol>li{counter-increment:list-0}ol>li::before{content:counter(list-0) ". "}li[data-list=checked]::before{content:"☑"}li[data-list=unchecked]::before{content:"☐"}li[data-list=checked]::before,li[data-list=unchecked]::before{color:#777}ol li::before,ul li::before{display:inline-block;margin-left:-1.5em;margin-right:0.3em;text-align:right;white-space:nowrap;width:1.2em}li:has(>.ql-ui)::before{content:none;display:none}`;var He=class extends C{constructor(){super(...arguments);this.time="";this.sender="";this.avatar="";this.subject="";this.subjectPlaceholder="";this.outbound=!1;this.noCollapse=!1;this.short=!1;this.defaultDisplay="text";this.hasSlotController=new J(this,"text","html");this.attachmentCount=0;this._textRows=[];this._footerObserver=new Ot(this,{target:null,config:{subtree:!0,childList:!0,attributes:!0,attributeFilter:["href","download","caption"]},callback:()=>this._debouncedReplace()});this._replaceDebounce=0}connectedCallback(){super.connectedCallback(),this.iframe.then(t=>{if(t.contentDocument){let r=this.htmlNodes[0];if(r){let n=r?.innerHTML??"";n=n.replace(/ /g," "),n=n.replace(/</g,"<"),n=n.replace(/>/g,">"),n=n.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");let a="<style>body,html{background-color: #ffffff}img{max-width:100%; max-height: 500px;}</style>";t.srcdoc=a+n}}t.addEventListener("load",()=>{setTimeout(()=>this._resizeIframe(t),50)})})}disconnectedCallback(){this._replaceDebounce&&(clearTimeout(this._replaceDebounce),this._replaceDebounce=0),super.disconnectedCallback()}_collapseContent(t){this.noCollapse||t.composedPath().some(n=>n instanceof HTMLElement&&n.classList.contains("content-block-header__actions"))||(this.short=!this.short,this.requestUpdate(),this.updateComplete.then(()=>{this.short||this.iframe.then(n=>{n&&!n.classList.contains("hidden")&&this._resizeIframe(n)})}))}_toggleText(){let t=this.shadowRoot?.querySelector(".text-content");this.iframe.then(r=>{t&&(r.classList.add("hidden"),t.classList.remove("hidden"))})}_toggleHtml(){let t=this.shadowRoot?.querySelector(".text-content");this.iframe.then(r=>{t&&(r.classList.remove("hidden"),t.classList.add("hidden"),setTimeout(()=>this._resizeIframe(r),0))})}_resizeIframe(t){let r=n=>{let a=n.contentDocument;if(!a)return;n.style.height="auto";let s=a.body,l=a.documentElement,d=[s?.scrollHeight??0,l?.scrollHeight??0,s?.offsetHeight??0,l?.offsetHeight??0],h=Math.max(...d);h>0&&(n.style.height=`${h}px`)};t?r(t):this.iframe.then(n=>{n?.contentDocument&&requestAnimationFrame(()=>r(n))})}handleAttachmentsSlotChange(){this.syncAttachmentCount()}syncAttachmentCount(){let t=this.shadowRoot?.querySelector('slot[name="attachments"]');this.attachmentCount=t?.assignedElements().length??0}firstUpdated(t){super.firstUpdated(t),this.syncAttachmentCount(),Promise.resolve().then(()=>this.syncAttachmentCount());let r=this.shadowRoot?.querySelectorAll(".text-section");r&&r.length>0&&r.forEach(n=>{n.innerHTML=n.innerHTML.replace(/ /g," "),n.innerHTML=n.innerHTML.replace(/<!--[\s\S]*?-->/g,""),n.innerHTML=n.innerHTML.replace(/<\/p><br>/g,"</p>")})}render(){let t=this.getTextSections(),r=this.querySelector(':scope > [slot="footer"]')!==null,n=this.hasSlotController.test("text"),a=this.hasSlotController.test("html"),s=n&&a,l=a&&(!n||this.defaultDisplay==="html");return u`
|
|
3809
|
+
<div class="${N({"content-block":!0,"content-block--outbound":this.outbound,"content-block--short":this.short,"content-block--collapsible":!this.noCollapse})}">
|
|
3810
3810
|
|
|
3811
3811
|
<div class="content-block-header" @click="${this._collapseContent}">
|
|
3812
3812
|
<div class="content-block-header__icon">
|
package/package.json
CHANGED
|
@@ -216,6 +216,7 @@ export default class ContentBlock extends ZincElement {
|
|
|
216
216
|
|
|
217
217
|
return html`
|
|
218
218
|
<div class="${classMap({
|
|
219
|
+
'content-block': true,
|
|
219
220
|
'content-block--outbound': this.outbound,
|
|
220
221
|
'content-block--short': this.short,
|
|
221
222
|
'content-block--collapsible': !this.noCollapse
|
|
@@ -1,19 +1,9 @@
|
|
|
1
1
|
@use "../../wc";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
text-rendering: optimizeLegibility;
|
|
6
|
-
-webkit-font-smoothing: antialiased;
|
|
7
|
-
-moz-osx-font-smoothing: grayscale;
|
|
8
|
-
|
|
9
|
-
background-color: rgba(var(--zn-panel), var(--zn-panel-opacity));
|
|
3
|
+
.content-block {
|
|
4
|
+
background-color: var(--zn-note-background, rgba(var(--zn-panel), var(--zn-panel-opacity)));
|
|
10
5
|
border-bottom: 1px solid rgb(var(--zn-border-color));
|
|
11
|
-
|
|
12
6
|
padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
|
|
13
|
-
|
|
14
|
-
*, *::before, *::after {
|
|
15
|
-
box-sizing: border-box;
|
|
16
|
-
}
|
|
17
7
|
}
|
|
18
8
|
|
|
19
9
|
.content-block-header {
|