@orangelogic/design-system 2.101.0 → 2.102.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/library/chunks/{list-editor.DMjclCWz.js → list-editor.CMakbQyU.js} +181 -183
- package/library/chunks/transformation.Dir8s_wm.js +151 -0
- package/library/components/asset-link-format.js +867 -672
- package/library/components/drawer.js +82 -71
- package/library/components/list-editor.js +1 -1
- package/library/components/molecules.js +1 -1
- package/library/components/tag.js +44 -31
- package/library/components/types.js +558 -561
- package/library/package.json +1 -1
- package/library/packages/atoms/src/components/drawer/drawer.d.ts +8 -0
- package/library/packages/atoms/src/components/tag/tag.d.ts +11 -1
- package/library/packages/organisms/src/asset-link-format/asset-link-format.d.ts +8 -0
- package/library/packages/organisms/src/asset-link-format/components/asset-link-format-crop/asset-link-format-crop.d.ts +4 -0
- package/library/packages/organisms/src/asset-link-format/components/asset-link-format-quality/asset-link-format-quality.d.ts +4 -0
- package/library/packages/organisms/src/asset-link-format/components/asset-link-format-resize/asset-link-format-resize.d.ts +4 -0
- package/library/packages/organisms/src/asset-link-format/components/asset-link-format-rotation/asset-link-format-rotation.d.ts +4 -0
- package/library/packages/organisms/src/content-builder/styleController.d.ts +2 -1
- package/library/packages/types/src/asset-link-format.d.ts +2 -0
- package/library/packages/types/src/content-builder.d.ts +5 -1
- package/library/packages/types/src/tag.d.ts +1 -0
- package/library/packages/utils/src/transformation/transformation.d.ts +4 -1
- package/library/react-web-component.d.ts +15 -3
- package/library/utils.js +1 -1
- package/package.json +1 -1
- package/library/chunks/transformation.Cqz3hPaQ.js +0 -144
|
@@ -1,35 +1,39 @@
|
|
|
1
|
-
import { n, C } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
2
|
-
import { c as
|
|
1
|
+
import { n as s, C as k } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
2
|
+
import { c as z } from "../chunks/component.styles.CRO4Odto.js";
|
|
3
3
|
import { a as d, s as p, w as v } from "../chunks/event.BeKOsirN.js";
|
|
4
|
-
import { c as
|
|
4
|
+
import { c as P } from "../chunks/custom-element.L4WJXn1j.js";
|
|
5
5
|
import { L as O } from "../chunks/i18n.DK1uYlJT.js";
|
|
6
6
|
import { M as $ } from "../chunks/modal.U1QltQKe.js";
|
|
7
|
-
import { l as
|
|
7
|
+
import { l as w, u } from "../chunks/scroll.xtO5yojm.js";
|
|
8
8
|
import { H as B } from "../chunks/slot.j5oheLJC.js";
|
|
9
|
-
import { w as
|
|
10
|
-
import { i as
|
|
11
|
-
import { r as
|
|
12
|
-
import { e as
|
|
9
|
+
import { w as C } from "../chunks/watch.BCJD77bD.js";
|
|
10
|
+
import { i as S, x as h } from "../chunks/lit-element.jLBm65_O.js";
|
|
11
|
+
import { r as A } from "../chunks/state.CSDxrqLd.js";
|
|
12
|
+
import { e as y } from "../chunks/query.BBf1UFkC.js";
|
|
13
13
|
import { e as g } from "../chunks/class-map.BiVq-cVR.js";
|
|
14
|
-
import { o as
|
|
15
|
-
import { n as
|
|
14
|
+
import { o as _ } from "../chunks/if-defined.BRoBj_Rp.js";
|
|
15
|
+
import { n as b } from "../chunks/when.Dr1es41R.js";
|
|
16
16
|
import { c as x } from "../chunks/capitalize.CNStXZBq.js";
|
|
17
|
-
import { s as
|
|
17
|
+
import { s as o, g as c } from "../chunks/animation-registry.HmpwNuGH.js";
|
|
18
18
|
import { C as q } from "../chunks/icon-button.CN0NGNQx.js";
|
|
19
|
-
const D =
|
|
20
|
-
var E = Object.defineProperty, L = Object.getOwnPropertyDescriptor,
|
|
21
|
-
for (var
|
|
22
|
-
(
|
|
23
|
-
return l &&
|
|
19
|
+
const D = S`:host{--size:25rem;--header-spacing:var(--cx-spacing-large);--body-spacing:var(--cx-spacing-large);--footer-spacing:var(--cx-spacing-large);--font-family:var(--cx-font-sans);display:contents}.drawer{top:0;pointer-events:none;width:0;height:0;inset-inline-start:0;overflow:hidden}.drawer--open{width:100%;height:100%}.drawer--persistent.drawer--open{width:var(--size);min-width:var(--size)}.drawer--contained{z-index:initial;position:absolute}.drawer--persistent{position:relative}.drawer--fixed{z-index:var(--cx-z-index-drawer);position:fixed}.drawer__panel{z-index:2;background-color:var(--cx-panel-background-color);max-width:100%;max-height:100%;box-shadow:var(--cx-shadow-large);pointer-events:all;flex-direction:column;display:flex;position:absolute;overflow:auto}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:100%;height:var(--size);inset-inline-start:0}.drawer--end .drawer__panel{top:0;inset-inline-end:0;bottom:auto;width:var(--size);height:100%;inset-inline-start:auto}.drawer--bottom .drawer__panel{top:auto;inset-inline-end:auto;bottom:0;width:100%;height:var(--size);inset-inline-start:0}.drawer--start .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:var(--size);height:100%;inset-inline-start:0}.drawer__header{gap:var(--cx-spacing-small);padding:var(--header-spacing);border-bottom:solid 1px var(--cx-input-border-color);font-family:var(--font-family);display:flex}.drawer__header__content{flex:auto}.drawer__title{font:inherit;font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-semibold);line-height:var(--cx-line-height-medium);align-items:center;margin:0;display:flex}.drawer__header-actions{justify-content:end;gap:var(--cx-spacing-2x-small);flex-wrap:wrap;flex-shrink:0;display:flex}.drawer__header-actions cx-icon-button,.drawer__header-actions ::slotted(cx-icon-button){font-size:var(--cx-font-size-medium);flex:none;align-items:center;display:flex}.drawer__description{font-family:var(--font-family);font-size:var(--cx-font-size-small);color:var(--cx-color-neutral-700)}.drawer__description ::slotted(*){margin:0}.drawer__body{padding:var(--body-spacing);-webkit-overflow-scrolling:touch;font-family:var(--font-family);flex:auto;display:block;overflow:auto}.drawer__footer{text-align:right;padding:var(--footer-spacing);font-family:var(--font-family)}.drawer__footer ::slotted(cx-button:not(:last-of-type)){margin-inline-end:var(--cx-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{background-color:var(--cx-overlay-background-color);pointer-events:all;display:block;position:fixed;inset:0}.drawer--contained .drawer__overlay{opacity:0;position:absolute}.drawer--contained.drawer--ignore-parent-width.drawer--open{width:0;overflow:visible}.drawer--ignore-parent-width .drawer__panel{max-width:none}.drawer__overlay--disabled{display:none}@media (forced-colors:active){.drawer__panel{border:solid 1px var(--cx-color-neutral-0)}}`;
|
|
20
|
+
var E = Object.defineProperty, L = Object.getOwnPropertyDescriptor, r = (e, a, i, l) => {
|
|
21
|
+
for (var n = l > 1 ? void 0 : l ? L(a, i) : a, f = e.length - 1, m; f >= 0; f--)
|
|
22
|
+
(m = e[f]) && (n = (l ? m(a, i, n) : m(n)) || n);
|
|
23
|
+
return l && n && E(a, i, n), n;
|
|
24
24
|
};
|
|
25
|
-
let t = class extends
|
|
25
|
+
let t = class extends k {
|
|
26
26
|
constructor() {
|
|
27
|
-
super(...arguments), this.hasSlotController = new B(
|
|
27
|
+
super(...arguments), this.hasSlotController = new B(
|
|
28
|
+
this,
|
|
29
|
+
"description",
|
|
30
|
+
"footer"
|
|
31
|
+
), this.localize = new O(this), this.modal = new $(this), this.isClosing = !1, this.open = !1, this.label = "", this.placement = "end", this.contained = !1, this.ignoreParentWidth = !1, this.noHeader = !1, this.variant = "overlay", this.noCloseButton = !1, this.handleDocumentKeyDown = (e) => {
|
|
28
32
|
this.contained || e.key === "Escape" && this.modal.isActive() && this.open && (e.stopImmediatePropagation(), this.requestClose("keyboard"));
|
|
29
33
|
};
|
|
30
34
|
}
|
|
31
35
|
connectedUpdatedCallback() {
|
|
32
|
-
this.drawer.hidden = !this.open, this.open && (this.addOpenListeners(), this.contained || (this.modal.activate(),
|
|
36
|
+
this.drawer.hidden = !this.open, this.open && (this.addOpenListeners(), this.contained || (this.modal.activate(), w(this)));
|
|
33
37
|
}
|
|
34
38
|
disconnectedCallback() {
|
|
35
39
|
super.disconnectedCallback(), u(this), this.removeOpenListeners();
|
|
@@ -44,10 +48,10 @@ let t = class extends C {
|
|
|
44
48
|
cancelable: !0,
|
|
45
49
|
detail: { source: e }
|
|
46
50
|
}).defaultPrevented) {
|
|
47
|
-
const
|
|
51
|
+
const i = c(this, "drawer.denyClose", {
|
|
48
52
|
dir: this.localize.dir()
|
|
49
53
|
});
|
|
50
|
-
d(this.panel,
|
|
54
|
+
d(this.panel, i.keyframes, i.options);
|
|
51
55
|
return;
|
|
52
56
|
}
|
|
53
57
|
this.hide();
|
|
@@ -65,7 +69,7 @@ let t = class extends C {
|
|
|
65
69
|
}
|
|
66
70
|
async handleOpenChange() {
|
|
67
71
|
if (this.open) {
|
|
68
|
-
this.emit("cx-show"), this.addOpenListeners(), this.originalTrigger = document.activeElement, this.contained || (this.modal.activate(),
|
|
72
|
+
this.emit("cx-show"), this.addOpenListeners(), this.originalTrigger = document.activeElement, this.contained || (this.modal.activate(), w(this));
|
|
69
73
|
const e = this.querySelector("[autofocus]");
|
|
70
74
|
e && e.removeAttribute("autofocus"), await Promise.all([
|
|
71
75
|
p(this.drawer),
|
|
@@ -83,15 +87,15 @@ let t = class extends C {
|
|
|
83
87
|
{
|
|
84
88
|
dir: this.localize.dir()
|
|
85
89
|
}
|
|
86
|
-
),
|
|
90
|
+
), i = c(this, "drawer.overlay.show", {
|
|
87
91
|
dir: this.localize.dir()
|
|
88
92
|
});
|
|
89
93
|
await Promise.all([
|
|
90
94
|
d(this.panel, a.keyframes, a.options),
|
|
91
95
|
this.contained ? Promise.resolve() : d(
|
|
92
96
|
this.overlay,
|
|
93
|
-
|
|
94
|
-
|
|
97
|
+
i.keyframes,
|
|
98
|
+
i.options
|
|
95
99
|
)
|
|
96
100
|
]), this.emit("cx-after-show");
|
|
97
101
|
} else {
|
|
@@ -124,12 +128,12 @@ let t = class extends C {
|
|
|
124
128
|
this.panel.hidden = !0;
|
|
125
129
|
})
|
|
126
130
|
]), this.drawer.hidden = !0, this.isClosing = !1, this.overlay.hidden = !1, this.panel.hidden = !1;
|
|
127
|
-
const
|
|
128
|
-
typeof
|
|
131
|
+
const i = this.originalTrigger;
|
|
132
|
+
typeof i?.focus == "function" && setTimeout(() => i.focus()), this.resetMultipleMenus(), this.emit("cx-after-hide");
|
|
129
133
|
}
|
|
130
134
|
}
|
|
131
135
|
handleNoModalChange() {
|
|
132
|
-
this.open && !this.contained && (this.modal.activate(),
|
|
136
|
+
this.open && !this.contained && (this.modal.activate(), w(this)), this.open && this.contained && (this.modal.deactivate(), u(this));
|
|
133
137
|
}
|
|
134
138
|
/** Shows the drawer. */
|
|
135
139
|
async show() {
|
|
@@ -149,13 +153,14 @@ let t = class extends C {
|
|
|
149
153
|
}
|
|
150
154
|
render() {
|
|
151
155
|
const e = this.variant === "persistent";
|
|
152
|
-
return
|
|
156
|
+
return h`<div part="base" class=${g({
|
|
153
157
|
drawer: !0,
|
|
154
158
|
"drawer--bottom": this.placement === "bottom",
|
|
155
159
|
"drawer--contained": this.contained,
|
|
156
160
|
"drawer--end": this.placement === "end",
|
|
157
161
|
"drawer--fixed": !this.contained,
|
|
158
162
|
"drawer--has-footer": this.hasSlotController.test("footer"),
|
|
163
|
+
"drawer--ignore-parent-width": this.contained && this.ignoreParentWidth,
|
|
159
164
|
"drawer--open": this.open || this.isClosing,
|
|
160
165
|
"drawer--persistent": e,
|
|
161
166
|
"drawer--rtl": this.localize.dir() === "rtl",
|
|
@@ -164,71 +169,77 @@ let t = class extends C {
|
|
|
164
169
|
})}><div part="overlay" class=${g({
|
|
165
170
|
drawer__overlay: !0,
|
|
166
171
|
"drawer__overlay--disabled": e
|
|
167
|
-
})} @click=${this.handleOverlayClick} tabindex="-1"></div><div part="panel" class="drawer__panel" role="dialog" aria-modal="true" aria-hidden=${this.open ? "false" : "true"} aria-label=${
|
|
172
|
+
})} @click=${this.handleOverlayClick} tabindex="-1"></div><div part="panel" class="drawer__panel" role="dialog" aria-modal="true" aria-hidden=${this.open ? "false" : "true"} aria-label=${_(this.noHeader ? this.label : void 0)} aria-labelledby=${_(this.noHeader ? void 0 : "title")} tabindex="0">${this.noHeader ? "" : h`<header part="header" class="drawer__header"><div class="drawer__header__content"><h2 part="title" class="drawer__title" id="title"><!-- If there's no label, use an invisible character to prevent the header from collapsing --><slot name="label">${this.label.length > 0 ? this.label : "\uFEFF"}</slot></h2>${b(
|
|
173
|
+
this.hasSlotController.test("description"),
|
|
174
|
+
() => h`<div part="description" class="drawer__description"><slot name="description"></slot></div>`
|
|
175
|
+
)}</div><div part="header-actions" class="drawer__header-actions"><slot name="header-actions"></slot>${b(
|
|
168
176
|
!this.noCloseButton,
|
|
169
|
-
() =>
|
|
177
|
+
() => h`<cx-icon-button part="close-button" exportparts="base:close-button__base" class="drawer__close" name="close" label=${this.localize.term("close")} @click=${this.handleCloseButtonClick}></cx-icon-button>`
|
|
170
178
|
)}</div></header>`}<slot part="body" class="drawer__body"></slot><footer part="footer" class="drawer__footer"><slot name="footer"></slot></footer></div></div>`;
|
|
171
179
|
}
|
|
172
180
|
};
|
|
173
|
-
t.styles = [
|
|
181
|
+
t.styles = [z, D];
|
|
174
182
|
t.dependencies = { "cx-icon-button": q };
|
|
175
|
-
|
|
176
|
-
|
|
183
|
+
r([
|
|
184
|
+
y(".drawer")
|
|
177
185
|
], t.prototype, "drawer", 2);
|
|
178
|
-
|
|
179
|
-
|
|
186
|
+
r([
|
|
187
|
+
y(".drawer__panel")
|
|
180
188
|
], t.prototype, "panel", 2);
|
|
181
|
-
|
|
182
|
-
|
|
189
|
+
r([
|
|
190
|
+
y(".drawer__overlay")
|
|
183
191
|
], t.prototype, "overlay", 2);
|
|
184
|
-
|
|
185
|
-
|
|
192
|
+
r([
|
|
193
|
+
A()
|
|
186
194
|
], t.prototype, "isClosing", 2);
|
|
187
|
-
|
|
188
|
-
|
|
195
|
+
r([
|
|
196
|
+
s({ reflect: !0, type: Boolean })
|
|
189
197
|
], t.prototype, "open", 2);
|
|
190
|
-
|
|
191
|
-
|
|
198
|
+
r([
|
|
199
|
+
s({ reflect: !0 })
|
|
192
200
|
], t.prototype, "label", 2);
|
|
193
|
-
|
|
194
|
-
|
|
201
|
+
r([
|
|
202
|
+
s({ reflect: !0 })
|
|
195
203
|
], t.prototype, "placement", 2);
|
|
196
|
-
|
|
197
|
-
|
|
204
|
+
r([
|
|
205
|
+
s({ reflect: !0, type: Boolean })
|
|
198
206
|
], t.prototype, "contained", 2);
|
|
199
|
-
|
|
200
|
-
|
|
207
|
+
r([
|
|
208
|
+
s({ attribute: "ignore-parent-width", reflect: !0, type: Boolean })
|
|
209
|
+
], t.prototype, "ignoreParentWidth", 2);
|
|
210
|
+
r([
|
|
211
|
+
s({ attribute: "no-header", reflect: !0, type: Boolean })
|
|
201
212
|
], t.prototype, "noHeader", 2);
|
|
202
|
-
|
|
203
|
-
|
|
213
|
+
r([
|
|
214
|
+
s({ reflect: !0, type: String })
|
|
204
215
|
], t.prototype, "variant", 2);
|
|
205
|
-
|
|
206
|
-
|
|
216
|
+
r([
|
|
217
|
+
s({ attribute: "no-close-button", reflect: !0, type: Boolean })
|
|
207
218
|
], t.prototype, "noCloseButton", 2);
|
|
208
|
-
|
|
209
|
-
|
|
219
|
+
r([
|
|
220
|
+
C("open", { waitUntilFirstUpdate: !0 })
|
|
210
221
|
], t.prototype, "handleOpenChange", 1);
|
|
211
|
-
|
|
212
|
-
|
|
222
|
+
r([
|
|
223
|
+
C("contained", { waitUntilFirstUpdate: !0 })
|
|
213
224
|
], t.prototype, "handleNoModalChange", 1);
|
|
214
|
-
t =
|
|
215
|
-
|
|
225
|
+
t = r([
|
|
226
|
+
P("cx-drawer")
|
|
216
227
|
], t);
|
|
217
|
-
|
|
228
|
+
o("drawer.showTop", {
|
|
218
229
|
keyframes: [
|
|
219
230
|
{ opacity: 0, translate: "0 -100%" },
|
|
220
231
|
{ opacity: 1, translate: "0 0" }
|
|
221
232
|
],
|
|
222
233
|
options: { duration: 250, easing: "ease" }
|
|
223
234
|
});
|
|
224
|
-
|
|
235
|
+
o("drawer.hideTop", {
|
|
225
236
|
keyframes: [
|
|
226
237
|
{ opacity: 1, translate: "0 0" },
|
|
227
238
|
{ opacity: 0, translate: "0 -100%" }
|
|
228
239
|
],
|
|
229
240
|
options: { duration: 250, easing: "ease" }
|
|
230
241
|
});
|
|
231
|
-
|
|
242
|
+
o("drawer.showEnd", {
|
|
232
243
|
keyframes: [
|
|
233
244
|
{ opacity: 0, translate: "100%" },
|
|
234
245
|
{ opacity: 1, translate: "0" }
|
|
@@ -239,7 +250,7 @@ r("drawer.showEnd", {
|
|
|
239
250
|
{ opacity: 1, translate: "0" }
|
|
240
251
|
]
|
|
241
252
|
});
|
|
242
|
-
|
|
253
|
+
o("drawer.hideEnd", {
|
|
243
254
|
keyframes: [
|
|
244
255
|
{ opacity: 1, translate: "0" },
|
|
245
256
|
{ opacity: 0, translate: "100%" }
|
|
@@ -250,21 +261,21 @@ r("drawer.hideEnd", {
|
|
|
250
261
|
{ opacity: 0, translate: "-100%" }
|
|
251
262
|
]
|
|
252
263
|
});
|
|
253
|
-
|
|
264
|
+
o("drawer.showBottom", {
|
|
254
265
|
keyframes: [
|
|
255
266
|
{ opacity: 0, translate: "0 100%" },
|
|
256
267
|
{ opacity: 1, translate: "0 0" }
|
|
257
268
|
],
|
|
258
269
|
options: { duration: 250, easing: "ease" }
|
|
259
270
|
});
|
|
260
|
-
|
|
271
|
+
o("drawer.hideBottom", {
|
|
261
272
|
keyframes: [
|
|
262
273
|
{ opacity: 1, translate: "0 0" },
|
|
263
274
|
{ opacity: 0, translate: "0 100%" }
|
|
264
275
|
],
|
|
265
276
|
options: { duration: 250, easing: "ease" }
|
|
266
277
|
});
|
|
267
|
-
|
|
278
|
+
o("drawer.showStart", {
|
|
268
279
|
keyframes: [
|
|
269
280
|
{ opacity: 0, translate: "-100%" },
|
|
270
281
|
{ opacity: 1, translate: "0" }
|
|
@@ -275,7 +286,7 @@ r("drawer.showStart", {
|
|
|
275
286
|
{ opacity: 1, translate: "0" }
|
|
276
287
|
]
|
|
277
288
|
});
|
|
278
|
-
|
|
289
|
+
o("drawer.hideStart", {
|
|
279
290
|
keyframes: [
|
|
280
291
|
{ opacity: 1, translate: "0" },
|
|
281
292
|
{ opacity: 0, translate: "-100%" }
|
|
@@ -286,15 +297,15 @@ r("drawer.hideStart", {
|
|
|
286
297
|
{ opacity: 0, translate: "100%" }
|
|
287
298
|
]
|
|
288
299
|
});
|
|
289
|
-
|
|
300
|
+
o("drawer.denyClose", {
|
|
290
301
|
keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],
|
|
291
302
|
options: { duration: 250 }
|
|
292
303
|
});
|
|
293
|
-
|
|
304
|
+
o("drawer.overlay.show", {
|
|
294
305
|
keyframes: [{ opacity: 0 }, { opacity: 1 }],
|
|
295
306
|
options: { duration: 250 }
|
|
296
307
|
});
|
|
297
|
-
|
|
308
|
+
o("drawer.overlay.hide", {
|
|
298
309
|
keyframes: [{ opacity: 1 }, { opacity: 0 }],
|
|
299
310
|
options: { duration: 250 }
|
|
300
311
|
});
|
|
@@ -18,7 +18,7 @@ import "../chunks/custom-element.L4WJXn1j.js";
|
|
|
18
18
|
import "../chunks/debounce.CIEhztrj.js";
|
|
19
19
|
import "../chunks/i18n.DK1uYlJT.js";
|
|
20
20
|
import "../chunks/watch.BCJD77bD.js";
|
|
21
|
-
import { c as E, C as F } from "../chunks/list-editor.
|
|
21
|
+
import { c as E, C as F } from "../chunks/list-editor.CMakbQyU.js";
|
|
22
22
|
import "../chunks/lit-element.jLBm65_O.js";
|
|
23
23
|
import "../chunks/state.CSDxrqLd.js";
|
|
24
24
|
import "../chunks/query.BBf1UFkC.js";
|
|
@@ -6,7 +6,7 @@ import { default as u } from "./corner-position-input-group.js";
|
|
|
6
6
|
import { C as m } from "../chunks/cropper.Bib8Abm3.js";
|
|
7
7
|
import { default as i } from "./dynamic-select.js";
|
|
8
8
|
import { C as c } from "../chunks/folder-select.BM7yeAsU.js";
|
|
9
|
-
import { C as P } from "../chunks/list-editor.
|
|
9
|
+
import { C as P } from "../chunks/list-editor.CMakbQyU.js";
|
|
10
10
|
import { default as I } from "./masonry.js";
|
|
11
11
|
import { default as y } from "./padding-input-group.js";
|
|
12
12
|
import { default as w } from "./position-picker.js";
|
|
@@ -1,32 +1,42 @@
|
|
|
1
|
-
import { n as
|
|
2
|
-
import { c as
|
|
3
|
-
import { c as
|
|
4
|
-
import { L as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import b from "
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import { n as i, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
|
|
2
|
+
import { c as u } from "../chunks/component.styles.CRO4Odto.js";
|
|
3
|
+
import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
|
|
4
|
+
import { L as h } from "../chunks/i18n.DK1uYlJT.js";
|
|
5
|
+
import { H as v } from "../chunks/slot.j5oheLJC.js";
|
|
6
|
+
import { i as d, x as m } from "../chunks/lit-element.jLBm65_O.js";
|
|
7
|
+
import { e as f } from "../chunks/class-map.BiVq-cVR.js";
|
|
8
|
+
import { C as b } from "../chunks/icon-button.CN0NGNQx.js";
|
|
9
|
+
import _ from "./line-clamp.js";
|
|
10
|
+
const n = 1, y = d`:host{display:inline-block}.tag{white-space:nowrap;-webkit-user-select:none;user-select:none;border:1px solid;align-items:center;line-height:1;display:flex}.tag__content{min-width:0}.tag--has-prefix .tag__prefix,.tag--has-suffix .tag__suffix{flex:none;align-items:center;display:inline-flex}.tag--has-prefix .tag__prefix{margin-inline-end:var(--cx-spacing-x-small)}.tag--has-suffix .tag__suffix{margin-inline-start:var(--cx-spacing-x-small)}.tag__remove::part(base){color:inherit;padding:0}.tag--primary{background-color:var(--cx-color-primary-50);border-color:var(--cx-color-primary-300);color:var(--cx-color-primary-800)}.tag--primary:active>cx-icon-button{color:var(--cx-color-primary)}.tag--success{background-color:var(--cx-color-success-50);border-color:var(--cx-color-success-200);color:var(--cx-color-success-800)}.tag--success:active>cx-icon-button{color:var(--cx-color-success)}.tag--neutral{background-color:var(--cx-color-neutral-50);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral-800)}.tag--neutral:active>cx-icon-button{color:var(--cx-color-neutral-600)}.tag--warning{background-color:var(--cx-color-warning-50);border-color:var(--cx-color-warning-200);color:var(--cx-color-warning-800)}.tag--warning:active>cx-icon-button{color:var(--cx-color-warning)}.tag--danger{background-color:var(--cx-color-danger-50);border-color:var(--cx-color-danger-200);color:var(--cx-color-danger-800)}.tag--danger:active>cx-icon-button{color:var(--cx-color-danger)}.tag--small{font-size:var(--cx-button-font-size-small);height:calc(var(--cx-input-height-small) * .8);line-height:calc(var(--cx-input-height-small) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-small);padding:0 var(--cx-spacing-x-small)}.tag--medium{font-size:var(--cx-button-font-size-medium);height:calc(var(--cx-input-height-medium) * .8);line-height:calc(var(--cx-input-height-medium) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-medium);padding:0 var(--cx-spacing-small)}.tag--large{font-size:var(--cx-button-font-size-large);height:calc(var(--cx-input-height-large) * .8);line-height:calc(var(--cx-input-height-large) - var(--cx-input-border-width) * 2);border-radius:var(--cx-input-border-radius-large);padding:0 var(--cx-spacing-medium)}.tag--small .tag__remove::part(icon){--font-size:var(--cx-font-size-small)}.tag--medium .tag__remove::part(icon){--font-size:var(--cx-font-size-medium)}.tag--large .tag__remove::part(icon){--font-size:var(--cx-font-size-large)}.tag--pill{border-radius:var(--cx-border-radius-pill)}.tag--removable{padding-inline-end:0}.tag--multiline{white-space:normal;height:auto;padding-block:var(--cx-spacing-2x-small);align-items:flex-start}.tag--multiline.tag--small{line-height:var(--cx-line-height-small)}.tag--multiline.tag--medium{line-height:var(--cx-line-height-medium)}.tag--multiline.tag--large{line-height:var(--cx-line-height-large)}`;
|
|
11
|
+
var w = Object.defineProperty, z = Object.getOwnPropertyDescriptor, t = (e, o, c, l) => {
|
|
12
|
+
for (var a = l > 1 ? void 0 : l ? z(o, c) : o, s = e.length - 1, g; s >= 0; s--)
|
|
13
|
+
(g = e[s]) && (a = (l ? g(o, c, a) : g(a)) || a);
|
|
14
|
+
return l && a && w(o, c, a), a;
|
|
14
15
|
};
|
|
15
|
-
let r = class extends
|
|
16
|
+
let r = class extends p {
|
|
16
17
|
constructor() {
|
|
17
|
-
super(...arguments), this.localize = new
|
|
18
|
+
super(...arguments), this.localize = new h(this), this.hasSlotController = new v(
|
|
19
|
+
this,
|
|
20
|
+
"prefix",
|
|
21
|
+
"suffix"
|
|
22
|
+
), this.variant = "neutral", this.size = "medium", this.pill = !1, this.removable = !1, this.lines = n;
|
|
18
23
|
}
|
|
19
24
|
handleRemoveClick() {
|
|
20
25
|
this.emit("cx-remove");
|
|
21
26
|
}
|
|
22
27
|
render() {
|
|
23
|
-
|
|
28
|
+
const e = Number.isFinite(this.lines) ? Math.max(n, Math.trunc(this.lines)) : n;
|
|
29
|
+
return m`<span part="base" class=${f({
|
|
24
30
|
tag: !0,
|
|
25
31
|
"tag--danger": this.variant === "danger",
|
|
32
|
+
// Slots
|
|
33
|
+
"tag--has-prefix": this.hasSlotController.test("prefix"),
|
|
34
|
+
"tag--has-suffix": this.hasSlotController.test("suffix"),
|
|
26
35
|
"tag--large": this.size === "large",
|
|
27
36
|
"tag--medium": this.size === "medium",
|
|
28
|
-
"tag--neutral": this.variant === "neutral",
|
|
29
37
|
// Modifiers
|
|
38
|
+
"tag--multiline": e > n,
|
|
39
|
+
"tag--neutral": this.variant === "neutral",
|
|
30
40
|
"tag--pill": this.pill,
|
|
31
41
|
"tag--primary": this.variant === "primary",
|
|
32
42
|
"tag--removable": this.removable,
|
|
@@ -35,28 +45,31 @@ let r = class extends m {
|
|
|
35
45
|
"tag--success": this.variant === "success",
|
|
36
46
|
"tag--text": this.variant === "text",
|
|
37
47
|
"tag--warning": this.variant === "warning"
|
|
38
|
-
})}><cx-line-clamp class="tag__content" lines
|
|
48
|
+
})}><slot name="prefix" part="prefix" class="tag__prefix"></slot><cx-line-clamp class="tag__content" lines=${e}><slot part="content"></slot></cx-line-clamp><slot name="suffix" part="suffix" class="tag__suffix"></slot>${this.removable ? m`<cx-icon-button part="remove-button" exportparts="base:remove-button__base" name="close" label=${this.localize.term("remove")} class="tag__remove" @click=${this.handleRemoveClick} tabindex="-1"></cx-icon-button>` : ""}</span>`;
|
|
39
49
|
}
|
|
40
50
|
};
|
|
41
|
-
r.styles = [
|
|
51
|
+
r.styles = [u, y];
|
|
42
52
|
r.dependencies = {
|
|
43
|
-
"cx-icon-button":
|
|
44
|
-
"cx-line-clamp":
|
|
53
|
+
"cx-icon-button": b,
|
|
54
|
+
"cx-line-clamp": _
|
|
45
55
|
};
|
|
46
|
-
|
|
47
|
-
|
|
56
|
+
t([
|
|
57
|
+
i({ reflect: !0 })
|
|
48
58
|
], r.prototype, "variant", 2);
|
|
49
|
-
|
|
50
|
-
|
|
59
|
+
t([
|
|
60
|
+
i({ reflect: !0 })
|
|
51
61
|
], r.prototype, "size", 2);
|
|
52
|
-
|
|
53
|
-
|
|
62
|
+
t([
|
|
63
|
+
i({ reflect: !0, type: Boolean })
|
|
54
64
|
], r.prototype, "pill", 2);
|
|
55
|
-
|
|
56
|
-
|
|
65
|
+
t([
|
|
66
|
+
i({ type: Boolean })
|
|
57
67
|
], r.prototype, "removable", 2);
|
|
58
|
-
|
|
59
|
-
|
|
68
|
+
t([
|
|
69
|
+
i({ type: Number })
|
|
70
|
+
], r.prototype, "lines", 2);
|
|
71
|
+
r = t([
|
|
72
|
+
x("cx-tag")
|
|
60
73
|
], r);
|
|
61
74
|
export {
|
|
62
75
|
r as default
|