@kubex/zinc 1.1.9 → 1.1.10
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 +1 -1
- package/package.json +1 -1
- package/src/components/chip/chip.scss +1 -1
|
@@ -47,79 +47,6 @@
|
|
|
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
|
-
},
|
|
123
50
|
{
|
|
124
51
|
"kind": "javascript-module",
|
|
125
52
|
"path": "components/alert/alert.js",
|
|
@@ -296,6 +223,79 @@
|
|
|
296
223
|
}
|
|
297
224
|
]
|
|
298
225
|
},
|
|
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",
|
|
@@ -36368,7 +36368,7 @@
|
|
|
36368
36368
|
"package": {
|
|
36369
36369
|
"name": "@kubex/zinc",
|
|
36370
36370
|
"description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
|
|
36371
|
-
"version": "1.1.
|
|
36371
|
+
"version": "1.1.10",
|
|
36372
36372
|
"author": "",
|
|
36373
36373
|
"license": "MIT"
|
|
36374
36374
|
}
|
|
@@ -13,17 +13,6 @@
|
|
|
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
|
-
},
|
|
27
16
|
{
|
|
28
17
|
"name": "zn-alert",
|
|
29
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.",
|
|
@@ -63,6 +52,17 @@
|
|
|
63
52
|
}
|
|
64
53
|
]
|
|
65
54
|
},
|
|
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.10",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -15,28 +15,6 @@
|
|
|
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
|
-
},
|
|
40
18
|
{
|
|
41
19
|
"name": "zn-alert",
|
|
42
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.",
|
|
@@ -100,6 +78,28 @@
|
|
|
100
78
|
]
|
|
101
79
|
}
|
|
102
80
|
},
|
|
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
|
@@ -244,7 +244,7 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
244
244
|
${this.time?C`<span class="message__time">${this.getSentTime()}</span>`:Ce}
|
|
245
245
|
${this.actionType==="internal"?C`<span class="message__badge">INTERNAL</span>`:Ce}
|
|
246
246
|
<slot name="badge"></slot>
|
|
247
|
-
</div>`}renderContent(){if(!this.message)return C`<slot></slot>`;let t=dce(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>'),di(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}};xi.styles=Q(cce),xi.dependencies={"zn-icon":tr},xi.SYSTEM_ACTION_TYPES=["connected.agent","attachment.added","transfer","ended","customer.ended","customer.connected","customer.disconnected"],xi.DISPLAYED_ACTION_TYPES=["","connected.agent","attachment.added","multi.answer","transfer","ended","error","customer.ended","message-sending","customer.connected","customer.disconnected","internal"],_([w()],xi.prototype,"sender",2),_([w()],xi.prototype,"message",2),_([w()],xi.prototype,"time",2),_([w()],xi.prototype,"avatar",2),_([w({attribute:"action-type",reflect:!0})],xi.prototype,"actionType",2),_([w({type:Boolean,reflect:!0,attribute:"customer-initiated"})],xi.prototype,"customerInitiated",2),_([w({type:Boolean,reflect:!0,attribute:"agent-initiated"})],xi.prototype,"agentInitiated",2);var Ph=xi;var sEe=Ph;Ph.define("zn-chat-message");var fce=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-block;vertical-align:middle}.chip{display:inline-flex;font-size:var(--zn-text-chip-font-size);font-family:var(--zn-font-family-sans);font-weight:var(--zn-text-chip-font-weight);border-radius:var(--zn-border-radius-small);padding-inline:var(--zn-spacing-x-small);padding-block:0;height:var(--zn-spacing-medium);text-align:center;gap:var(--zn-spacing-small);width:-moz-fit-content;width:fit-content;justify-content:center;align-items:center;line-height:var(--zn-text-chip-line-height);letter-spacing:var(--zn-letter-spacing-loose);white-space:nowrap}.chip--flush{padding:0;height:auto}.chip--flush-x{padding-inline:0}.chip--flush-y{padding-block:0;height:auto}.chip--primary{color:rgba(var(--zn-primary),0.9);background:rgba(var(--zn-primary),0.1)}.chip--error{color:rgb(var(--zn-color-error));background:rgba(var(--zn-color-error),0.1)}.chip--info{color:rgb(var(--zn-color-info));background:rgba(var(--zn-color-info),0.1)}.chip--warning{color:rgb(var(--zn-color-warning));background:rgba(var(--zn-color-warning),0.1)}.chip--success{color:rgb(var(--zn-color-success));background:rgba(var(--zn-color-success),0.1)}.chip--neutral{color:rgb(var(--zn-text));background:rgba(var(--zn-border-color),0.1)}.chip--transparent{color:rgb(var(--zn-text));background:transparent}.chip--custom{color:rgb(var(--zn-text));background-color:hsl(from var(--chip-color-override,inherit) h s l/0.1)}.chip__value{overflow:hidden;text-overflow:ellipsis;text-transform:var(--zn-text-chip-transform)}.chip__caption{opacity:0.7;font-weight:var(--zn-text-chip-font-weight);text-transform:var(--zn-text-chip-transform)}.chip__caption::after{content:":"}.chip--no-content{padding:var(--zn-spacing-3x-small) var(--zn-spacing-2x-small)}.chip--with-icon{padding-left:var(--zn-spacing-2x-small)}`;var mn=class extends X{constructor(){super(...arguments);this.icon="";this.caption="";this.iconSize=18;this.type="neutral";this.flush=!1;this.flushX=!1;this.flushY=!1;this.hasSlotController=new Je(this,"[default]","action")}render(){let t=this.hasSlotController.test("[default]");return C`
|
|
247
|
+
</div>`}renderContent(){if(!this.message)return C`<slot></slot>`;let t=dce(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>'),di(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}};xi.styles=Q(cce),xi.dependencies={"zn-icon":tr},xi.SYSTEM_ACTION_TYPES=["connected.agent","attachment.added","transfer","ended","customer.ended","customer.connected","customer.disconnected"],xi.DISPLAYED_ACTION_TYPES=["","connected.agent","attachment.added","multi.answer","transfer","ended","error","customer.ended","message-sending","customer.connected","customer.disconnected","internal"],_([w()],xi.prototype,"sender",2),_([w()],xi.prototype,"message",2),_([w()],xi.prototype,"time",2),_([w()],xi.prototype,"avatar",2),_([w({attribute:"action-type",reflect:!0})],xi.prototype,"actionType",2),_([w({type:Boolean,reflect:!0,attribute:"customer-initiated"})],xi.prototype,"customerInitiated",2),_([w({type:Boolean,reflect:!0,attribute:"agent-initiated"})],xi.prototype,"agentInitiated",2);var Ph=xi;var sEe=Ph;Ph.define("zn-chat-message");var fce=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-block;vertical-align:middle}.chip{display:inline-flex;font-size:var(--zn-text-chip-font-size);font-family:var(--zn-font-family-sans);font-weight:var(--zn-text-chip-font-weight);border-radius:var(--zn-border-radius-small);padding-inline:var(--zn-spacing-x-small);padding-block:0;height:var(--zn-spacing-medium);text-align:center;gap:var(--zn-spacing-x-small);width:-moz-fit-content;width:fit-content;justify-content:center;align-items:center;line-height:var(--zn-text-chip-line-height);letter-spacing:var(--zn-letter-spacing-loose);white-space:nowrap}.chip--flush{padding:0;height:auto}.chip--flush-x{padding-inline:0}.chip--flush-y{padding-block:0;height:auto}.chip--primary{color:rgba(var(--zn-primary),0.9);background:rgba(var(--zn-primary),0.1)}.chip--error{color:rgb(var(--zn-color-error));background:rgba(var(--zn-color-error),0.1)}.chip--info{color:rgb(var(--zn-color-info));background:rgba(var(--zn-color-info),0.1)}.chip--warning{color:rgb(var(--zn-color-warning));background:rgba(var(--zn-color-warning),0.1)}.chip--success{color:rgb(var(--zn-color-success));background:rgba(var(--zn-color-success),0.1)}.chip--neutral{color:rgb(var(--zn-text));background:rgba(var(--zn-border-color),0.1)}.chip--transparent{color:rgb(var(--zn-text));background:transparent}.chip--custom{color:rgb(var(--zn-text));background-color:hsl(from var(--chip-color-override,inherit) h s l/0.1)}.chip__value{overflow:hidden;text-overflow:ellipsis;text-transform:var(--zn-text-chip-transform)}.chip__caption{opacity:0.7;font-weight:var(--zn-text-chip-font-weight);text-transform:var(--zn-text-chip-transform)}.chip__caption::after{content:":"}.chip--no-content{padding:var(--zn-spacing-3x-small) var(--zn-spacing-2x-small)}.chip--with-icon{padding-left:var(--zn-spacing-2x-small)}`;var mn=class extends X{constructor(){super(...arguments);this.icon="";this.caption="";this.iconSize=18;this.type="neutral";this.flush=!1;this.flushX=!1;this.flushY=!1;this.hasSlotController=new Je(this,"[default]","action")}render(){let t=this.hasSlotController.test("[default]");return C`
|
|
248
248
|
<div class="${ie({chip:!0,"chip--with-content":t,"chip--no-content":!t,"chip--with-icon":this.icon,"chip--flush":this.flush,"chip--flush-x":this.flushX,"chip--flush-y":this.flushY,"chip--info":this.type==="info","chip--success":this.type==="success","chip--warning":this.type==="warning","chip--error":this.type==="error","chip--primary":this.type==="primary","chip--transparent":this.type==="transparent","chip--custom":this.type==="custom","chip--neutral":this.type==="neutral"})}">
|
|
249
249
|
${this.icon?C`
|
|
250
250
|
<zn-icon src="${this.icon}" size="${this.iconSize}"></zn-icon>`:""}
|
package/package.json
CHANGED