xv-webcomponents 0.1.31 → 0.1.32
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/cjs/loader.cjs.js +1 -1
- package/dist/cjs/xv-accordion-v2_26.cjs.entry.js +97 -41
- package/dist/cjs/xv-accordion-v2_26.cjs.entry.js.map +1 -1
- package/dist/cjs/xv-webcomponents.cjs.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js +1 -1
- package/dist/collection/components/xv-dropdown/xv-dropdown.js +41 -10
- package/dist/collection/components/xv-dropdown/xv-dropdown.js.map +1 -1
- package/dist/collection/components/xv-footer/xv-footer.js +1 -1
- package/dist/collection/components/xv-header/xv-header.js +1 -1
- package/dist/collection/components/xv-link/xv-link.css +5 -0
- package/dist/collection/components/xv-link/xv-link.js +3 -3
- package/dist/collection/components/xv-link/xv-link.js.map +1 -1
- package/dist/collection/components/xv-modal/xv-modal.css +3 -0
- package/dist/collection/components/xv-modal/xv-modal.js +31 -7
- package/dist/collection/components/xv-modal/xv-modal.js.map +1 -1
- package/dist/collection/components/xv-notification/xv-notification.js +3 -3
- package/dist/collection/components/xv-notification/xv-notification.js.map +1 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js +1 -1
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.css +3 -0
- package/dist/collection/components/xv-overflow-menu/xv-overflow-menu.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js +1 -1
- package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +1 -1
- package/dist/collection/components/xv-table/_vars.js.map +1 -1
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.css +10 -3
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js +10 -10
- package/dist/collection/components/xv-table/xv-table-cell/xv-table-cell.js.map +1 -1
- package/dist/collection/components/xv-table/xv-table-expand/xv-table-expand.js +1 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.css +8 -1
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +33 -2
- package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js.map +1 -1
- package/dist/collection/components/xv-table/xv-table.css +18 -0
- package/dist/collection/components/xv-table/xv-table.js +30 -4
- package/dist/collection/components/xv-table/xv-table.js.map +1 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.css +7 -0
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js +42 -1
- package/dist/collection/components/xv-tabs/xv-tab/xv-tab.js.map +1 -1
- package/dist/collection/components/xv-tabs/xv-tabs.css +55 -9
- package/dist/collection/components/xv-tabs/xv-tabs.js +90 -13
- package/dist/collection/components/xv-tabs/xv-tabs.js.map +1 -1
- package/dist/collection/components/xv-tag/xv-tag.js +1 -1
- package/dist/collection/components/xv-text-input/xv-text-input.js +44 -1
- package/dist/collection/components/xv-text-input/xv-text-input.js.map +1 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.css +6 -1
- package/dist/collection/components/xv-tooltip/xv-tooltip.js +22 -3
- package/dist/collection/components/xv-tooltip/xv-tooltip.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/xv-accordion-v2_26.entry.js +97 -41
- package/dist/esm/xv-accordion-v2_26.entry.js.map +1 -1
- package/dist/esm/xv-webcomponents.js +1 -1
- package/dist/types/components/xv-dropdown/xv-dropdown.d.ts +2 -0
- package/dist/types/components/xv-link/xv-link.d.ts +1 -1
- package/dist/types/components/xv-modal/xv-modal.d.ts +5 -1
- package/dist/types/components/xv-table/_vars.d.ts +4 -0
- package/dist/types/components/xv-table/xv-table-cell/xv-table-cell.d.ts +3 -6
- package/dist/types/components/xv-table/xv-table-row/xv-table-row.d.ts +1 -0
- package/dist/types/components/xv-table/xv-table.d.ts +2 -1
- package/dist/types/components/xv-tabs/xv-tab/xv-tab.d.ts +2 -0
- package/dist/types/components/xv-tabs/xv-tabs.d.ts +16 -3
- package/dist/types/components/xv-text-input/xv-text-input.d.ts +3 -0
- package/dist/types/components/xv-tooltip/xv-tooltip.d.ts +1 -0
- package/dist/types/components.d.ts +92 -14
- package/dist/xv-webcomponents/p-51113bf3.entry.js +2 -0
- package/dist/xv-webcomponents/p-51113bf3.entry.js.map +1 -0
- package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
- package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
- package/package.json +1 -1
- package/dist/xv-webcomponents/p-e750290d.entry.js +0 -2
- package/dist/xv-webcomponents/p-e750290d.entry.js.map +0 -1
|
@@ -246,7 +246,7 @@ const XvDropdown = class {
|
|
|
246
246
|
return values;
|
|
247
247
|
};
|
|
248
248
|
this.handleOpen = () => {
|
|
249
|
-
if (this.disabled || this.open)
|
|
249
|
+
if (this.disabled || this.open || this.loading)
|
|
250
250
|
return;
|
|
251
251
|
this.open = true;
|
|
252
252
|
};
|
|
@@ -324,7 +324,7 @@ const XvDropdown = class {
|
|
|
324
324
|
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
325
325
|
}
|
|
326
326
|
render() {
|
|
327
|
-
return (index.h(index.Host, { key: '
|
|
327
|
+
return (index.h(index.Host, { key: 'c079d730375bac47e2990c414f78dbe5f0c819de', class: "xv-dropdown", role: "combobox", size: this.size, open: this.open, error: this.error, disabled: this.disabled, tabindex: this.disabled ? -1 : false }, index.h("label", { key: '89822575a8ba145cfbc54bd40ae50021069243ea', class: "label" }, index.h("slot", { key: 'd09fa78e0df2f911160b059a1254dd09b1c2edcf', name: "label" }, this.label)), index.h("div", { key: 'a4cb541ee3ccca7148b11ff2a5455d9efb75831e', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (index.h("p", { class: "control_value" }, this.selected.join(', '))) : (index.h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), index.h("svg", { key: '698d39331ed3e1e09ae48db98244d0f8e2cecc47', class: "control_arrow", focusable: "false", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16" }, index.h("path", { key: '4e78ab3ba78ff63b21f2766887440b5d638fc5e6', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && index.h("div", { key: 'd3493338d8e5acd48a0c825843da13ba631e7050', class: "options" }, index.h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (index.h("p", { key: 'b337cece3d8c4aeb4aedc10b0ef6669c19e27e30', class: "helper" }, this.error || this.warning || this.helper))));
|
|
328
328
|
}
|
|
329
329
|
componentWillLoad() {
|
|
330
330
|
this.setDefaultValues();
|
|
@@ -335,6 +335,18 @@ const XvDropdown = class {
|
|
|
335
335
|
disconnectedCallback() {
|
|
336
336
|
this.removeListeners();
|
|
337
337
|
}
|
|
338
|
+
renderIcon() {
|
|
339
|
+
if (this.loading) {
|
|
340
|
+
return index.h("xv-loader-v2", { class: "control_icon error", size: SIZE_VAR.XS });
|
|
341
|
+
}
|
|
342
|
+
if (this.error) {
|
|
343
|
+
return (index.h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
|
|
344
|
+
}
|
|
345
|
+
if (!this.error && !!this.warning) {
|
|
346
|
+
return (index.h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
|
|
347
|
+
}
|
|
348
|
+
return undefined;
|
|
349
|
+
}
|
|
338
350
|
get el() { return index.getElement(this); }
|
|
339
351
|
static get watchers() { return {
|
|
340
352
|
"open": ["openChangeHandle"]
|
|
@@ -363,7 +375,7 @@ const XvDropdownItem = class {
|
|
|
363
375
|
});
|
|
364
376
|
}
|
|
365
377
|
render() {
|
|
366
|
-
return (index.h(index.Host, { key: '
|
|
378
|
+
return (index.h(index.Host, { key: '50c0bf3d6da015580b84ba455cc5f5b02a836fbb', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, index.h("slot", { key: '3833346442861a6669a6fea827f7da3ef872861c' }), this.selected && index.h("span", { key: '139e1a037467cf98f363f172454a8a9122667955', class: "checkmark" })));
|
|
367
379
|
}
|
|
368
380
|
componentWillLoad() {
|
|
369
381
|
if (!this.value)
|
|
@@ -392,7 +404,7 @@ const Xvfooter = class {
|
|
|
392
404
|
}
|
|
393
405
|
}
|
|
394
406
|
render() {
|
|
395
|
-
return (index.h("footer", { key: '
|
|
407
|
+
return (index.h("footer", { key: '0db6bc4ceab1da36181d8a106677ee2b4c871a5d' }, index.h("div", { key: '4ed868bc230e7dd45ebca9255827c1cfeb40e1f7', innerHTML: this.htmlContent })));
|
|
396
408
|
}
|
|
397
409
|
get el() { return index.getElement(this); }
|
|
398
410
|
};
|
|
@@ -426,13 +438,13 @@ const XvHeader = class {
|
|
|
426
438
|
}
|
|
427
439
|
}
|
|
428
440
|
render() {
|
|
429
|
-
return (index.h("div", { key: '
|
|
441
|
+
return (index.h("div", { key: 'fb841d4abad14c4387fe46688c4f3af2307b886a', id: "nav-container", class: "xv-header" }, index.h("nav", { key: '58e74fe05d964a92caa4557b80507a38c4a98179', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, index.h("div", { key: '97ea3528c6e075c1d387ea24594f91104d7b8867', class: "container" }, index.h("div", { key: '8bdd52c37bcec11ea6b30d0174736f59788b53eb', class: "row" }, index.h("div", { key: 'e449f3feac1044f052ec6e2617c0d935064656c7', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, index.h("div", { key: '55a1d17cba703a6e40eb338c7543dc6976bf38a9', class: "navbar-header" }, index.h("button", { key: '4db1d1c007cce64e85d9c4bed564d2871ababcfc', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, index.h("i", { key: '65e325b62f0438edd702620c4e17a53219967a0a', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), index.h("div", { key: '441bfb68db2009ee3237b77d81fb95dc81aa481f', class: "visible-xs-inline" }, index.h("a", { key: 'addb8f9d2564bb51622d446709200f1f11ca5676', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: 'e3397a1cce10f32d84b329d7e0f86a668b59f0ce', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), index.h("div", { key: '90f493fdfb861b43a6e15fd98f4b20b5c27393f1', class: "hidden-xs" }, index.h("a", { key: '91d6cc6a27a1a1345453b6e61bffc75dd8af8dac', href: "https://www.crossvertise.com/", class: "navbar-brand" }, index.h("img", { key: '3e865f04a2b4fd3518d9afdb6e14c1ff40fe316f', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), index.h("div", { key: 'f93d3819bb445cdb9e5af3aef12b015a343d6310', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, index.h("ul", { key: 'f45ff2bde04e59dcf6b64843540aa3fd4e40f689', class: "nav nav-pills nav-meta pull-right" }, index.h("li", { key: 'ed84b8372b0d2bb667a8cafadb4ab563da5abfe0' }, index.h("a", { key: '13a62dee054906b573e6680101a3ca0b21b831a0', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, index.h("i", { key: '0baabbb18c07000acd90290323c9634be9c4fc7c', class: "fa fa-user" }), index.h("i", { key: 'd704cea8700026507e77c06ef9b9ed7debabe817', class: "fa fa-exchange-alt" }))), index.h("li", { key: '71071c96004f83a4aaf0c882139da925e42866a8' }, index.h("a", { key: 'e408f1d8d07134e922871ad2cf528f1593d0d1e0', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), index.h("a", { key: 'c646eb76e06b7dbdc38b2c2781271413d2fd15ea', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), index.h("a", { key: '0af75819d57f535803e52289ff96fac569c50300', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, index.h("i", { key: '5bbb8f180b8e305b03b6fdfec3390582b0150d5d', class: "fa fa-phone" }))), index.h("li", { key: 'eccf3a963e94fbfd5d0bac632583bf1bb8ae75af', class: "dropdown", id: "my-xv-menu" }, index.h("a", { key: 'c08b078cf111d3b68521eae23b80ca6f179462ca', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, index.h("i", { key: '64624fbad4dfcf0249e8cfeb40bf6724d1546b06', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", index.h("span", { key: '7cb9c97ba9717c43d5ca6f590434dd925e523726', class: "hidden-xs" }, "Mein Bereich"), index.h("span", { key: '96609dcd1f21c1de3f6b5921bf8d0d21414e16ba', class: "caret" })), index.h("ul", { key: '89d95f1a1620aba9e971ea4f2b53d5e82634dcb7', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, index.h("li", { key: 'f995fffeb04c8e71855e333d1bcb88fa96cf138b' }, index.h("a", { key: '4f4109b08bd7fb0e0beff296a5566f447febb72e', href: "#" }, index.h("i", { key: '4676a42f1d33aca1fa82c39c66ad852d4a46a90b', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", index.h("i", { key: '8f786200fa2781591c930bf2f8c5bcaab9c26ee6', class: "fa fa-caret-down" }))), index.h("li", { key: 'cbbe6aea9589e291677d1d4a9545b6338c515f59' }, index.h("a", { key: '90d02c4e0ffd7c880d5a054bd93efad517c17cf1', href: "#" }, index.h("i", { key: 'a658d4354d00bc1b33bdbabdd67c2822c0bbadd7', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", index.h("i", { key: 'a2a4d953a2f7ab3becd94609a063bd41444f1d5e', class: "fa fa-caret-down" }))), index.h("li", { key: '45f2e6536719387d007c300569bd888ab73a368e', role: "separator", class: "divider" }), index.h("li", { key: 'c1b3c21287ad9c948994a7e66b5598f2d7b92cee' }, index.h("a", { key: '4577bb088ee70c827a6c73670ab333c1e7233ebb', href: "#" }, index.h("i", { key: '59190e441f77825b6faa7f1a6a126b55368424bd', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", index.h("span", { key: '56c84bb9710788f708f66a29b8ed2560eddcdc9c', class: "badge" }, "0"), index.h("i", { key: '3a94b49a78254ff80c748031879499e0b1c3d6cd', class: "fa fa-caret-down" }))), index.h("li", { key: '56c19ee479dd30ef4b2a3ced111c5a2488b011be' }, index.h("a", { key: 'bf6795b1a369fd48144a5c3f2d6dde87329005d3', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, index.h("i", { key: 'd74387b0a971ec31ef52f7275a4059135f7a2f2e', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), index.h("li", { key: '4cd39d21f39cf38b653fe354fcac95541ed3b5d4', class: "visible-sm-block visible-xs-block hidden-xxs" }, index.h("a", { key: 'ff7d151d063d17b4937c8adee7240928abf11ca1', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, index.h("i", { key: 'e921298a0e809efa116a19445211146af7ff478c', class: "fa fa-search", "aria-hidden": "true" }))), index.h("li", { key: 'daa6740a57a697e93099a9acf0f290103e38885e', class: "hidden-md hidden-lg" }, index.h("a", { key: '6b1d587f4fde5f26adcec987a13d837db9b3d4b9', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/logon?returnUrl=https%3A%2F%2Fwww.crossvertise.com%2F" }, index.h("i", { key: '29eaea9f9d7c099b0666aa80c0baa47f0194eca8', class: "fa fa-user fa-lg", "aria-hidden": "true" }), index.h("span", { key: '2e32a44fff79ce051c6478911dff06ab014fcb03', class: "hidden-xs" }, "Login"))), index.h("li", { key: '70aad34ed65c79187309b6d43c2d60a4c50c10f7', class: "hidden-xs hidden-sm" }, index.h("a", { key: '0700efbabecfcc3c23703d5ef51d455cc37a7c76', role: "button", class: "btn btn-default navbar-btn btn-link", "data-toggle": "modal", "data-target": "#login-modal" }, index.h("i", { key: 'dacc64c5ec7a805a82c04786942045d34f9f5505', class: "fa fa-user fa-lg", "aria-hidden": "true" }), index.h("span", { key: '6862516762bb49b3268ab5439616e5d84eeee33a' }, "Login"))), index.h("li", { key: '1465c89bc216b466eb9b502503c4e071522b949e', class: "hidden-xs" }, index.h("a", { key: '4fb628fc7e3713032c8cc6291bea0364549ec486', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, index.h("span", { key: 'bd27d18587f03bb6579a68ec0f67e401e9a2f4aa' }, "Registrieren"))), index.h("li", { key: 'b58c8bdfcba9fbcc4fc9abcc7a532552a6bf4d59', class: "navbar-divider hidden-xs" }), index.h("li", { key: '9c184e2e5ce45a573f227427b21511efb77a7367' }, index.h("a", { key: '4e1e2905fa27feef5ee4d7e8d08cf8f365460aa9', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, index.h("span", { key: 'bc461fb3883487c5a9bab6171e0395d896871dae', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), index.h("span", { key: '798befbada9c958f75aa71534223bfc3053e2d8a', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), index.h("span", { key: '466810cee52d04c975304e2644a19b0fed8acb52', class: "badge badge-success" }, "0"))))))), index.h("div", { key: 'df2e0fdf3ee050571555b538a13b81255a5ed6d6', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, index.h("div", { key: 'aa8e481da43b4d19fef2ebe5f18c3f698188109a', class: "container" }, index.h("form", { key: '1f74f4c3728f1dbc53ee160316cfc503a05d1809', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, index.h("div", { key: '3b0a8b8e0422baeabf49bc2acbd416ce3d0d0f4d', class: "input-group" }, index.h("input", { key: '81b1da2dc533688f68238fde64d2b0137143bfa0', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), index.h("span", { key: '1bd05fa901a518fbfe48044a73d6b134699c1aeb', class: "input-group-btn force-full-width" }, index.h("button", { key: '825112ca880ad4ca36e449def155c87f1b134168', class: "btn btn-default search-addon", type: "submit" }, index.h("i", { key: '2812b8d6e635a3c8d971982340e70c1aa1d72072', class: "fa fa-search", "aria-hidden": "true" })))))))), index.h("div", { key: '33abf8e8dbe83d92a154f9487ba37826e0c3befe', innerHTML: this.htmlContent })));
|
|
430
442
|
}
|
|
431
443
|
get el() { return index.getElement(this); }
|
|
432
444
|
};
|
|
433
445
|
XvHeader.style = XvHeaderStyle0;
|
|
434
446
|
|
|
435
|
-
const xvLinkCss = ":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{display:block;text-decoration-line:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";
|
|
447
|
+
const xvLinkCss = ":host{font-family:var(--ff-body, inherit)}:host(.xv-link_inline){display:inline-block}:host(.xv-link_inline) .xv-link{text-decoration-line:underline;text-decoration-style:solid;text-decoration-skip-ink:none;text-decoration-thickness:auto;text-underline-offset:auto;text-underline-position:from-font}:host(.xv-link_standalone){display:block}:host(.xv-link_standalone) .xv-link{display:block;text-decoration-line:none}:host(.xv-link_ghost) .xv-link{color:inherit;text-decoration:none}.xv-link{display:inline-flex;gap:8px;align-items:center;color:var(--link-primary);font-family:var(--ff-body);font-style:normal;font-weight:400;transition:color 200ms ease-in-out}.xv-link:active{color:var(--text-primary)}.xv-link:visited{color:var(--link-visted)}.xv-link:hover{color:var(--link-primary-hover);cursor:pointer}.xv-link:disabled,.xv-link_disabled,.xv-link::part(disabled){color:var(--text-disabled);pointer-events:none;cursor:initial}.xv-link.sm{font-size:var(--fz-sm);line-height:137.5%}.xv-link.md{font-size:var(--fz-md);line-height:128.571%}.xv-link.lg{font-size:var(--fz-lg);line-height:133.333%}";
|
|
436
448
|
const XvLinkV2Style0 = xvLinkCss;
|
|
437
449
|
|
|
438
450
|
const XvLink = class {
|
|
@@ -449,7 +461,7 @@ const XvLink = class {
|
|
|
449
461
|
e.stopPropagation();
|
|
450
462
|
}
|
|
451
463
|
render() {
|
|
452
|
-
return (index.h(index.Host, { key: '
|
|
464
|
+
return (index.h(index.Host, { key: 'de2c35e526a84d4f0ea3d309e9b338951cebf205', class: `xv-link_${this.variant}` }, index.h("a", { key: 'fb838688638462ab7e160377420b785584581b46', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, index.h("slot", { key: 'f921c3064a1372e1855fa41cd65f5dda53a98913', name: "icon-left" }), index.h("slot", { key: '6250191343e6676a7db35ff087e31ddc4f2a6f66' }), index.h("slot", { key: 'fc091c32addf4a4f1d2616b24f121325921f5954', name: "icon-right" }))));
|
|
453
465
|
}
|
|
454
466
|
};
|
|
455
467
|
XvLink.style = XvLinkV2Style0;
|
|
@@ -481,13 +493,13 @@ const XvLoader = class {
|
|
|
481
493
|
};
|
|
482
494
|
XvLoader.style = XvLoaderV2Style0;
|
|
483
495
|
|
|
484
|
-
const xvModalCss = ":host{display:inline-flex}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding-block:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0}:host .modal_content{padding:var(--gap-md, 16px);overflow:auto}:host .modal_footer{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
|
|
496
|
+
const xvModalCss = ":host{display:inline-flex}:host .backdrop{position:fixed;inset:0;background:rgba(0, 0, 0, 0.4);opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1000;display:flex;align-items:center;justify-content:center}:host .modal{display:flex;flex-direction:column;max-height:60vh;max-width:960px;position:relative;animation:fadeIn 0.25s ease;padding-block:var(--gap-md, 16px);background:var(--layer-02, #FFF);box-shadow:0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3)}:host .modal_header{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_header__title{color:var(--text-text-primary, #333);font-family:var(--ff-heading, \"Gill Sans\");font-size:var(--fz-xl, 21px);line-height:133.333%;margin:0 20px 0 0}:host .modal_content{padding:var(--gap-md, 16px);overflow:visible}:host .modal_content.overflow{overflow:auto}:host .modal_footer{position:relative;padding-inline:var(--gap-md, 16px)}:host .modal_close{z-index:1;cursor:pointer;border:none;outline:none;font-size:28px;background-color:transparent;position:absolute;right:10px;top:10px;transition:350ms ease-in-out opacity}:host .modal_close:hover{opacity:0.6}:host .modal_close:active{opacity:0.3}:host([open]) .backdrop{opacity:1;pointer-events:all}:host([size=xs]) .modal{max-width:min(300px, 90vw)}:host([size=sm]) .modal{max-width:min(480px, 90vw)}:host([size=md]) .modal{max-width:min(600px, 90vw)}:host([size=lg]) .modal{max-width:min(960px, 90vw)}:host([size=xl]) .modal{max-width:min(1200px, 80vw)}@keyframes fadeIn{from{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}";
|
|
485
497
|
const XvModalV2Style0 = xvModalCss;
|
|
486
498
|
|
|
487
499
|
const XvModal = class {
|
|
488
500
|
constructor(hostRef) {
|
|
489
501
|
index.registerInstance(this, hostRef);
|
|
490
|
-
this.
|
|
502
|
+
this.openChange = index.createEvent(this, "openChange", 7);
|
|
491
503
|
/**
|
|
492
504
|
* Is modal opened
|
|
493
505
|
*/
|
|
@@ -500,6 +512,10 @@ const XvModal = class {
|
|
|
500
512
|
* Size of modal. But max size is 90% view width
|
|
501
513
|
*/
|
|
502
514
|
this.size = SIZE_VAR.MD;
|
|
515
|
+
/**
|
|
516
|
+
* When need scroll modal content
|
|
517
|
+
*/
|
|
518
|
+
this.overflow = true;
|
|
503
519
|
this.triggerEl = null;
|
|
504
520
|
this.onBackdropClick = async (e) => {
|
|
505
521
|
if (this.permanent)
|
|
@@ -528,19 +544,19 @@ const XvModal = class {
|
|
|
528
544
|
async openModal() {
|
|
529
545
|
var _a;
|
|
530
546
|
this.open = true;
|
|
531
|
-
(_a = this.
|
|
547
|
+
(_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
|
|
532
548
|
return this.open;
|
|
533
549
|
}
|
|
534
550
|
;
|
|
535
551
|
async closeModal() {
|
|
536
552
|
var _a;
|
|
537
553
|
this.open = false;
|
|
538
|
-
(_a = this.
|
|
554
|
+
(_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
|
|
539
555
|
return this.open;
|
|
540
556
|
}
|
|
541
557
|
render() {
|
|
542
558
|
var _a;
|
|
543
|
-
return (index.h(index.Host, { key: '
|
|
559
|
+
return (index.h(index.Host, { key: '2366289d47548d714bbdd49948f792f351f28f08', role: "dialog", size: this.size, id: this.el.id }, index.h("slot", { key: '5315e7fff2a42c9cacff80f8123198b3b478afb9', name: "trigger", onSlotchange: this.setupTrigger }), index.h("div", { key: 'de7fd67203a1728be67f86a2ea40279d93faa17c', class: { backdrop: true }, onClick: this.onBackdropClick }, index.h("div", { key: '088329b5f8624893d0e6a70de8e5320b555ca917', class: "modal" }, index.h("button", { key: '930e3e2f153a8b29ad072d3293ceff42d4f29467', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), index.h("div", { key: '454958176af3ffe3a3ce05fcd4676498ba64ed7d', class: "modal_header" }, index.h("slot", { key: 'c36847fd99974fe853eedebaab7d35b14895fc62', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && index.h("h5", { key: '967825b4cf637c6fde19330fda5b88fc63aee479', class: "modal_header__title" }, this.el.title))), index.h("div", { key: '6ea2df2fa221a02655c9d981565132879901bbe7', class: { 'modal_content': true, overflow: this.overflow } }, index.h("slot", { key: '2636c2c24cfc4faf7561f2c4d5a380f23ce904e8' })), index.h("div", { key: 'cb4d838daf7bc1e8fb4c029318250ec2f3e7a37a', class: "modal_footer" }, index.h("slot", { key: '79b371cb00c2152a1131be31202f7c8061a4b61b', name: "footer" }))))));
|
|
544
560
|
}
|
|
545
561
|
disconnectedCallback() {
|
|
546
562
|
this.removeTriggerListener();
|
|
@@ -587,14 +603,14 @@ const XvNotification = class {
|
|
|
587
603
|
};
|
|
588
604
|
}
|
|
589
605
|
render() {
|
|
590
|
-
return (index.h(index.Host, { key: '
|
|
606
|
+
return (index.h(index.Host, { key: '910f05cb3632aee19f893969b3f2225890586cfb', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), index.h("div", { key: '575f30f393d7bf69f7ac4b7c14cc08742ea37a02', class: "content" }, index.h("div", { key: '9df87a020f9b0eeaa37b4162e930e3d73db4eba5', class: "content_wrapper" }, this.el.title && index.h("h5", { key: '6aceb1370abd0511d94def7830c203f8e51ad84b', class: "content_title" }, this.el.title), index.h("slot", { key: 'c053806cacc705dc3cfbba53c36dc761ca995e87' })), index.h("slot", { key: '7967d656c6541a9f21cb2a2cd87376915c21f0c3', name: "footer" })), this.dismissible && index.h("button", { key: '0cb3d1e44bb0f84f8a72f1ac7875364911fb4fa7', class: "close", onClick: this.closeHandle })));
|
|
591
607
|
}
|
|
592
608
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
593
609
|
get el() { return index.getElement(this); }
|
|
594
610
|
};
|
|
595
611
|
XvNotification.style = XvNotificationV2Style0;
|
|
596
612
|
|
|
597
|
-
const xvOverflowMenuCss = ":host{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:128px;max-width:50vw;width:max-content}:host .list ::slotted(xv-overflow-menu-v2-item){padding:var(--overflow-menu-item-padding)}:host .list.position-right{left:initial;right:0;border-top-right-radius:0}:host .list.position-left{border-top-left-radius:0}:host([size=xs]){--overflow-menu-item-padding:4px 16px;--overflow-menu-size:24px}:host([size=sm]){--overflow-menu-size:32px;--overflow-menu-item-padding:7px 16px}:host([size=md]){--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px}:host([size=lg]){--overflow-menu-size:48px;--overflow-menu-item-padding:16px}:host([size=xl]){--overflow-menu-size:56px;--overflow-menu-item-padding:16px}:host([open]) .btn{border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:var(--layer-01);box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1);z-index:1}:host([open]) .list{max-height:500px;z-index:2;box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1)}";
|
|
613
|
+
const xvOverflowMenuCss = ":host{--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px;display:inline-flex;flex-direction:column;position:relative}:host .btn{display:inline-flex;align-items:center;justify-content:center;width:var(--overflow-menu-size);height:var(--overflow-menu-size);background-color:transparent;border:1px solid transparent;transition:300ms ease-in-out color, 300ms ease-in-out background-color, 200ms ease box-shadow;font-size:calc(var(--overflow-menu-size) / 2);color:var(--icon-primary);border-radius:5%;margin:0;padding:0}:host .btn:hover{cursor:pointer;color:var(--link-primary-hover);background-color:var(--background-hover)}:host .btn:active{background-color:var(--background-active);color:var(--icon-disabled)}:host .btn:disabled{background-color:transparent;opacity:0.5;cursor:not-allowed}:host .list{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background-color:var(--layer-01);position:absolute;top:100%;left:0;max-height:0;overflow:hidden;border-radius:3px;transition:200ms ease-in-out max-height, 100ms ease box-shadow;min-width:128px;max-width:50vw;width:max-content}:host .list.open{overflow:visible}:host .list ::slotted(xv-overflow-menu-v2-item){padding:var(--overflow-menu-item-padding)}:host .list.position-right{left:initial;right:0;border-top-right-radius:0}:host .list.position-left{border-top-left-radius:0}:host([size=xs]){--overflow-menu-item-padding:4px 16px;--overflow-menu-size:24px}:host([size=sm]){--overflow-menu-size:32px;--overflow-menu-item-padding:7px 16px}:host([size=md]){--overflow-menu-size:40px;--overflow-menu-item-padding:11px 16px}:host([size=lg]){--overflow-menu-size:48px;--overflow-menu-item-padding:16px}:host([size=xl]){--overflow-menu-size:56px;--overflow-menu-item-padding:16px}:host([open]) .btn{border-bottom-left-radius:0;border-bottom-right-radius:0;background-color:var(--layer-01);box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1);z-index:1}:host([open]) .list{max-height:500px;z-index:2;box-shadow:-2px 2px 2px 0 rgba(0, 0, 0, 0.1)}";
|
|
598
614
|
const XvOverflowMenuV2Style0 = xvOverflowMenuCss;
|
|
599
615
|
|
|
600
616
|
const XvOverflowMenu = class {
|
|
@@ -647,7 +663,7 @@ const XvOverflowMenu = class {
|
|
|
647
663
|
}
|
|
648
664
|
}
|
|
649
665
|
render() {
|
|
650
|
-
return (index.h(index.Host, { key: '
|
|
666
|
+
return (index.h(index.Host, { key: '4a9f6f2c8a5a4f3c4d1b8c666930b51ccab80228', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, index.h("button", { key: 'd55471ea38b1f3bf3d04054ff310f616d3c1cd4d', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, index.h("svg", { key: '70d5c2fd85655ecc48060d31a3ac3e2d822b33ce', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, index.h("path", { key: '68847d692a27943e1e39368da3f448b4162cecb2', d: "M64 368a48 48 0 1 0 0 96 48 48 0 1 0 0-96zm0-160a48 48 0 1 0 0 96 48 48 0 1 0 0-96zM112 96A48 48 0 1 0 16 96a48 48 0 1 0 96 0z" }))), index.h("div", { key: '0c57895d318dc03c502f28a1b175aee7cc14c573', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, index.h("slot", { key: 'd5645b5bce743e4cc8eae0c271379d212926c3b2' }))));
|
|
651
667
|
}
|
|
652
668
|
componentDidLoad() {
|
|
653
669
|
this.openChangeHandle();
|
|
@@ -684,7 +700,7 @@ const XvOverflowMenuItem = class {
|
|
|
684
700
|
this.itemClick.emit({ event, value: this.value });
|
|
685
701
|
}
|
|
686
702
|
render() {
|
|
687
|
-
return (index.h(index.Host, { key: '
|
|
703
|
+
return (index.h(index.Host, { key: '8dc660c2d77b3885eb0b164633874047ca89058c', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, index.h("slot", { key: '557ee1f91a59d867bae782b7352688f091c3228b' })));
|
|
688
704
|
}
|
|
689
705
|
};
|
|
690
706
|
XvOverflowMenuItem.style = XvOverflowMenuV2ItemStyle0;
|
|
@@ -759,7 +775,7 @@ const XvProgressIndicator = class {
|
|
|
759
775
|
this.updateChildItems();
|
|
760
776
|
}
|
|
761
777
|
render() {
|
|
762
|
-
return (index.h(index.Host, { key: '
|
|
778
|
+
return (index.h(index.Host, { key: '00ad521136d02deaedb3984ff711d23ff0853062', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, index.h("slot", { key: '054dbfebd8387688975665058d9bba3903a768fc' })));
|
|
763
779
|
}
|
|
764
780
|
get el() { return index.getElement(this); }
|
|
765
781
|
static get watchers() { return {
|
|
@@ -777,27 +793,28 @@ const XvProgressIndicatorItem = class {
|
|
|
777
793
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
778
794
|
}
|
|
779
795
|
render() {
|
|
780
|
-
return (index.h(index.Host, { key: '
|
|
796
|
+
return (index.h(index.Host, { key: '79acb016d3774423ebc4b4fca110a2ac450358ff', status: this.status, class: { 'xv-progress-indicator-item': true } }, index.h("span", { key: 'da650032b1e038635c5bbbbdabcf8de3d510c162', class: "line" }), index.h("span", { key: 'b3cfcdca102ea9d180b711a90a3a735b1faf0296', class: "icon" }, index.h("svg", { key: 'ad92853715e40b74c291867a158759cfd13ff9af', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, index.h("path", { key: '955f05d5ffcebd9dee12fd89ae34cdf94d68f668', fill: "currentColor", d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" }))), index.h("p", { key: '9c47e82f96314c2e0868c6c67ff9c0b4b66eec4f', class: "label" }, index.h("slot", { key: '5730d018f363e84fb299877ee854360eb42b06ce' }))));
|
|
781
797
|
}
|
|
782
798
|
get el() { return index.getElement(this); }
|
|
783
799
|
};
|
|
784
800
|
XvProgressIndicatorItem.style = XvProgressIndicatorV2ItemStyle0;
|
|
785
801
|
|
|
786
|
-
const xvTabCss = ":host{display:block}";
|
|
802
|
+
const xvTabCss = ":host{display:block}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:200px}";
|
|
787
803
|
const XvTabV2Style0 = xvTabCss;
|
|
788
804
|
|
|
789
805
|
const XvTab = class {
|
|
790
806
|
constructor(hostRef) {
|
|
791
807
|
index.registerInstance(this, hostRef);
|
|
792
808
|
this.disabled = false;
|
|
809
|
+
this.loading = false;
|
|
793
810
|
}
|
|
794
811
|
render() {
|
|
795
|
-
return index.h(index.Host, { key: '
|
|
812
|
+
return (index.h(index.Host, { key: '82d797fe902cd4dab29cf094485aad742835e6b4', disabled: this.disabled, name: this.name }, this.loading ? index.h("xv-loader-v2", { size: SIZE_VAR.LG }) : index.h("slot", null)));
|
|
796
813
|
}
|
|
797
814
|
};
|
|
798
815
|
XvTab.style = XvTabV2Style0;
|
|
799
816
|
|
|
800
|
-
const xvTableCss = ":host{--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px}:host([size=sm]){--xv-table-padding-y:10px}:host([size=lg]){--xv-table-padding-y:21px}:host([size=xl]){--xv-table-padding-y:31px}";
|
|
817
|
+
const xvTableCss = ":host{--xv-table-min-height:51.11px;--xv-table-padding-x:16px;--xv-table-padding-y:15px;--xv-table-cols-template:repeat(auto-fit, minmax(0, 1fr));display:block}:host .batch-actions{user-select:none;pointer-events:none;position:absolute;left:0;bottom:100%;width:0;min-height:48px;overflow:hidden;border-radius:3px 3px 0 0;background-color:var(--interactive-01, #273435);display:flex;align-items:center;justify-content:space-between;column-gap:var(--spacing-04);flex-wrap:nowrap;box-sizing:border-box;transition:250ms ease-in-out height, 250ms ease-in-out width, 250ms ease-in-out padding-inline;color:var(--text-on-color, #fff)}:host .batch-actions_content{display:block;overflow:hidden;white-space:nowrap}:host .batch-actions_count{margin:0;white-space:nowrap;font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);font-style:normal;font-weight:400;line-height:var(--fz-lg, 18px);letter-spacing:0.16px}:host .xv-table{display:flex;flex-direction:column;position:relative}:host .xv-table ::slotted([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host .xv-table ::slotted([checked]:not([header]):hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host .xv-table ::slotted(xv-table-v2-row[disabled]){opacity:0.4;cursor:not-allowed;user-select:none}:host .xv-table ::slotted([slot=footer]:hover),:host .xv-table ::slotted([slot=footer]){background-color:var(--layer-accent-02, #E3E3E3)}:host .xv-table_loading{z-index:10;display:flex;align-items:center;justify-content:center;min-height:var(--xv-table-min-height, 51.11px);position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8)}:host .xv-table-title,:host ::slotted([slot=title]){color:var(--text-primary, #333) !important;font-size:var(--fz-xl, 21px) !important;margin-top:var(--spacing-05, 16px) !important;margin-bottom:var(--spacing-06, 24px) !important;font-family:var(--ff-heading, \"Gill Sans\");font-style:normal;font-weight:400;line-height:normal}:host([hover]) .xv-table ::slotted(:hover:not([header])){background-color:var(--layer-hover-01, #E9E9E9)}:host(.batchVisible) .batch-actions{pointer-events:initial;user-select:initial;width:100%;padding-inline:var(--xv-table-padding-x)}:host([expandable]) ::slotted(xv-table-v2-row){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 10px)}:host([variant-checkbox]) ::slotted([slot=footer]:not([variant])){padding-inline-start:calc(max(10px, var(--xv-table-padding-x)) * 2 + 57.97px)}:host([size=xs]){--xv-table-padding-y:7px;--xv-table-min-height:35.1px}:host([size=sm]){--xv-table-padding-y:10px;--xv-table-min-height:41.11px}:host([size=lg]){--xv-table-padding-y:21px;--xv-table-min-height:63.09px}:host([size=xl]){--xv-table-padding-y:31px;--xv-table-min-height:78.77px}";
|
|
801
818
|
const XvTableV2Style0 = xvTableCss;
|
|
802
819
|
|
|
803
820
|
const XvTable = class {
|
|
@@ -806,7 +823,7 @@ const XvTable = class {
|
|
|
806
823
|
this.selected = new Map();
|
|
807
824
|
this.selectedCount = 0;
|
|
808
825
|
}
|
|
809
|
-
|
|
826
|
+
handleCheckedChange({ detail }) {
|
|
810
827
|
if (detail.header || detail.expandable)
|
|
811
828
|
return;
|
|
812
829
|
if (detail.checked) {
|
|
@@ -832,12 +849,15 @@ const XvTable = class {
|
|
|
832
849
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
833
850
|
}
|
|
834
851
|
render() {
|
|
835
|
-
return (index.h(index.Host, { key: '
|
|
852
|
+
return (index.h(index.Host, { key: 'd661040bcec38c039dd3ae7516fa40bfb0274da7', class: { batchVisible: !!this.selectedCount } }, index.h("slot", { key: 'a341cf9b6bf250dbf0dbee0bf17da8a734be7a31', name: "title" }, !!this.el.title && index.h("h2", { key: 'bf33335fe741ebae458f3dcc02d1d65ac4c75ddd', class: "xv-table-title" }, this.el.title)), index.h("slot", { key: 'b7504f0b48d538ce6d4c1fb7706e1ab8bce8bd8c', name: "toolbar" }), index.h("div", { key: '54b51b51171726650858ce3484c1d510dd88796c', class: "xv-table" }, index.h("div", { key: '22f7f3638901e4f80acee21696ee4ae8d7e01ad4', class: "batch-actions" }, index.h(index.Fragment, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, index.h("div", { key: 'eb7a82cda62bb1084715d446da1ca082c7ff6f37', class: "batch-actions_content" }, index.h("slot", { key: 'eb95cf88821c541e71b1620ce0d79bbe196a16e8', name: "batch" })), index.h("p", { key: '050dbbefa2fc8adfffbbb12652964279bd5b69d4', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), index.h("slot", { key: '8dcfa43420bad4a128b15f1095556eeac062939c' }), index.h("slot", { key: '588776181bded66364751e3e2e5fd9713084aee7', name: "footer" }), !!this.loading && (index.h("div", { key: '1478a55759576d012c5dbb3a630309fe42bc527f', class: "xv-table_loading" }, index.h("xv-loader-v2", { key: '822799790a03089ff83a99a49fa0f8fb4b9f36b0', size: SIZE_VAR.LG }))))));
|
|
836
853
|
}
|
|
837
854
|
componentWillLoad() {
|
|
838
855
|
this.setColsSizeTemplate();
|
|
839
856
|
}
|
|
840
857
|
get el() { return index.getElement(this); }
|
|
858
|
+
static get watchers() { return {
|
|
859
|
+
"colsSize": ["setColsSizeTemplate"]
|
|
860
|
+
}; }
|
|
841
861
|
};
|
|
842
862
|
XvTable.style = XvTableV2Style0;
|
|
843
863
|
|
|
@@ -850,7 +870,7 @@ var XV_SORT_DIR;
|
|
|
850
870
|
const XV_EXPANDABLE_KEY = 'expandable';
|
|
851
871
|
const XV_TABLE_TAG = 'xv-table-v2';
|
|
852
872
|
|
|
853
|
-
const xvTableCellCss = "@charset \"UTF-8\";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}";
|
|
873
|
+
const xvTableCellCss = "@charset \"UTF-8\";:host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:var(--xv-table-padding-y) var(--xv-table-padding-x);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-style:normal;font-weight:400;line-height:1.2;letter-spacing:0.16px;transition:0.25s ease-in-out background-color}:host([multiline]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:initial;padding-bottom:1px;padding-top:0;line-height:1.2}:host([align=left]){text-align:left}:host([align=right]){text-align:right}:host([align=center]){text-align:center}:host([sort]){position:relative;cursor:pointer;user-select:none}:host([sort]):before,:host([sort]):after{font-size:12px;line-height:10px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;right:8px;pointer-events:none;transition:350ms ease-in-out opacity;opacity:0}:host([sort]):before{content:\"▲\";top:50%;transform:translateY(calc(-50% - 5px))}:host([sort])::after{content:\"▼\";top:50%;transform:translateY(calc(-50% + 5px))}:host([sort]:hover){background-color:var(--layer-accent-hover-01, #E3E3E3)}:host([sort]:hover)::before,:host([sort]:hover)::after{opacity:1}:host([sort=asc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=asc])::before{opacity:1}:host([sort=asc])::after{display:none}:host([sort=desc]){background-color:var(--layer-accent-active-01, #D1D1D1)}:host([sort=desc])::before{display:none}:host([sort=desc])::after{opacity:1}";
|
|
854
874
|
const XvTableV2CellStyle0 = xvTableCellCss;
|
|
855
875
|
|
|
856
876
|
const XvTableCell = class {
|
|
@@ -878,7 +898,7 @@ const XvTableCell = class {
|
|
|
878
898
|
}
|
|
879
899
|
;
|
|
880
900
|
render() {
|
|
881
|
-
return (index.h(index.Host, { key: '
|
|
901
|
+
return (index.h(index.Host, { key: 'a2b8e397dcc44ae5a4e018f655586ef4e4900564' }, index.h("slot", { key: '9b2f63ba4c33f03cb55030d87b4da14a2745ecc3' })));
|
|
882
902
|
}
|
|
883
903
|
get el() { return index.getElement(this); }
|
|
884
904
|
};
|
|
@@ -897,7 +917,7 @@ const XvTableExpand = class {
|
|
|
897
917
|
};
|
|
898
918
|
}
|
|
899
919
|
render() {
|
|
900
|
-
return (index.h(index.Host, { key: '
|
|
920
|
+
return (index.h(index.Host, { key: 'f7aca6da5b9345c3c1b5777577f22cfa6f203050' }, index.h("button", { key: '5c503f211c763cbfa0fb9b8327146e92bb803eef', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), index.h("slot", { key: 'f55a433ebf374f2a03381035846b3c180b5e8852', name: XV_EXPANDABLE_KEY }), index.h("div", { key: '9b6f5e487e156a6f3e14a0aa7a10065410de0cca', class: { expandableContent: true, open: this.open } }, index.h("slot", { key: 'ac9992699f28465a63346ebdf3f638b8fd53ec15' }))));
|
|
901
921
|
}
|
|
902
922
|
componentDidLoad() {
|
|
903
923
|
utils.setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -906,23 +926,34 @@ const XvTableExpand = class {
|
|
|
906
926
|
};
|
|
907
927
|
XvTableExpand.style = XvTableV2ExpandStyle0;
|
|
908
928
|
|
|
909
|
-
const xvTableRowCss = ":host{display:grid;
|
|
929
|
+
const xvTableRowCss = ":host{display:grid;grid-template-columns:var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)));border-bottom:1px solid #E3E3E3;border-right:1px solid #E3E3E3;border-left:1px solid #E3E3E3;min-height:var(--xv-table-min-height);align-items:center;align-content:center;transition:0.25s ease-in-out background-color}:host .cell-control{min-height:20px;display:flex;align-items:center;justify-content:center}:host([variant]){grid-template-columns:minmax(47.97px, min-content) var(--xv-table-cols-template, repeat(auto-fit, minmax(0, 1fr)))}:host([hover]:not([header]):hover){background-color:var(--layer-hover-01, #E9E9E9)}:host([checked]){background-color:var(--layer-selected-01, #E3E3E3)}:host([checked]:hover){background-color:var(--layer-selected-hover-01, #DADADA)}:host([header]){background-color:var(--layer-accent-01, #F7F7F7);box-shadow:0 0 0 1px #E3E3E3 inset;border-bottom:none}";
|
|
910
930
|
const XvTableV2RowStyle0 = xvTableRowCss;
|
|
911
931
|
|
|
912
932
|
const XvTableRow = class {
|
|
913
933
|
constructor(hostRef) {
|
|
914
934
|
index.registerInstance(this, hostRef);
|
|
935
|
+
this.checkedChange = index.createEvent(this, "checkedChange", 7);
|
|
915
936
|
this.selectRow = index.createEvent(this, "selectRow", 7);
|
|
916
937
|
this.checkHandle = ({ detail: checked }) => {
|
|
917
938
|
this.checked = checked;
|
|
918
939
|
if (!checked && this.partial)
|
|
919
940
|
this.partial = checked;
|
|
941
|
+
if (!this.name)
|
|
942
|
+
this.name = utils.uidGenerator();
|
|
943
|
+
this.selectRow.emit({
|
|
944
|
+
name: this.name,
|
|
945
|
+
value: this.value,
|
|
946
|
+
checked: this.checked,
|
|
947
|
+
partial: this.partial,
|
|
948
|
+
header: this.header,
|
|
949
|
+
expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
|
|
950
|
+
});
|
|
920
951
|
};
|
|
921
952
|
}
|
|
922
953
|
checkedChangeHandle() {
|
|
923
954
|
if (!this.name)
|
|
924
955
|
this.name = utils.uidGenerator();
|
|
925
|
-
this.
|
|
956
|
+
this.checkedChange.emit({
|
|
926
957
|
name: this.name,
|
|
927
958
|
value: this.value,
|
|
928
959
|
checked: this.checked,
|
|
@@ -943,7 +974,7 @@ const XvTableRow = class {
|
|
|
943
974
|
}
|
|
944
975
|
}
|
|
945
976
|
render() {
|
|
946
|
-
return (index.h(index.Host, { key: '
|
|
977
|
+
return (index.h(index.Host, { key: 'a83693a0ac8a484e77d6569e9c5e6d5552d1e4bd' }, this.variant !== undefined && (index.h("xv-table-v2-cell", { key: '79c530cedc2dedfe7a3f30cca998d96e8e26e68d', class: "cell-control" }, this.variant === 'checkbox' && (index.h("xv-checkbox-v2", { key: 'd5e061b229448bba6d71321cff99aac9947a55d1', name: this.name, partial: this.partial, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly, onEventChange: this.checkHandle })), this.variant === 'radio' && (index.h("input", { key: 'e39cc7c88c199863810e4b261bc833cac4f5d883', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), index.h("slot", { key: '17151fe90edcb037bc504f88a33bd206e684c402' })));
|
|
947
978
|
}
|
|
948
979
|
componentWillLoad() {
|
|
949
980
|
this.setInitialAttrs();
|
|
@@ -966,13 +997,13 @@ var TABS_VATIANT;
|
|
|
966
997
|
// other variants will be here
|
|
967
998
|
})(TABS_VATIANT || (TABS_VATIANT = {}));
|
|
968
999
|
|
|
969
|
-
const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-
|
|
1000
|
+
const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-headers_tab{background:none;padding:11px var(--gap-md, 16px);cursor:pointer;font:inherit;transition:border-color 0.3s ease, font-weight 0.3s ease, color 0.3s ease;position:relative;border:2px solid transparent;border-bottom-color:var(--border-border-subtle-01, #D1D1D1);background-blend-mode:multiply;color:var(--text-secondary, #515151);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:18px;letter-spacing:0.16px;height:40px;white-space:nowrap}:host(.xv-tabs) .tab-headers_tab:after{content:\"\";position:absolute;transition:background-color 0.3s ease, width 0.3s ease;top:100%;left:0;right:0;width:0;height:2px;background-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:focus{outline:none;border:2px solid var(--border-border-subtle-01, #D1D1D1)}:host(.xv-tabs) .tab-headers_tab:hover{border-bottom-color:var(--border-strong-01, #8B8B8B)}:host(.xv-tabs) .tab-headers_tab.active{color:var(--text-primary, #333);font-weight:700}:host(.xv-tabs) .tab-headers_tab.active:after{width:100%}:host(.xv-tabs) .tab-headers_tab.active:focus{border-color:var(--interactive-01, #273435)}:host(.xv-tabs) .tab-headers_tab:disabled{color:var(--text-on-color-disabled, #8B8B8B);border-bottom-color:var(--border-disabled, #D1D1D1);cursor:not-allowed}:host(.xv-tabs) .tab-headers_tab:disabled:after{background-color:var(--border-disabled, #D1D1D1)}:host(.xv-tabs) .tab-headers_btn{outline:none;width:40px;height:40px;background:none;border:none;cursor:pointer;position:relative;transition:0.25s ease-in-out opacity}:host(.xv-tabs) .tab-headers_btn:before{content:\"\";position:absolute;top:50%;left:50%;width:0;height:0;border:solid currentColor;border-width:0 2px 2px 0;display:inline-block;padding:5px;transform:translate(-50%, -50%) rotate(45deg)}:host(.xv-tabs) .tab-headers_btn:active{opacity:0.3}:host(.xv-tabs) .tab-headers_btn.prev:before{transform:translate(-50%, -50%) rotate(135deg)}:host(.xv-tabs) .tab-headers_btn.next:before{transform:translate(-50%, -50%) rotate(-45deg)}:host(.xv-tabs) .tab-content-wrapper{position:relative;overflow:hidden;padding:var(--gap-md, 16px) 0}:host(.xv-tabs) ::slotted(xv-tab-v2){position:absolute;opacity:0;max-height:0;transition:max-height 0.5s ease;width:100%;pointer-events:none}:host(.xv-tabs) ::slotted(xv-tab-v2.active){position:relative;opacity:1;overflow-y:auto;pointer-events:auto;max-height:1000px}:host(.xv-tabs) .xv-tabs_empty{display:block;text-align:center;margin:20px auto;font-size:var(--fz-xl);color:var(--text-primary)}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:300px}";
|
|
970
1001
|
const XvTabsV2Style0 = xvTabsCss;
|
|
971
1002
|
|
|
972
1003
|
const XvTabs = class {
|
|
973
1004
|
constructor(hostRef) {
|
|
974
1005
|
index.registerInstance(this, hostRef);
|
|
975
|
-
this.
|
|
1006
|
+
this.activeChange = index.createEvent(this, "activeChange", 7);
|
|
976
1007
|
/**
|
|
977
1008
|
* Index of active tab
|
|
978
1009
|
*/
|
|
@@ -988,22 +1019,41 @@ const XvTabs = class {
|
|
|
988
1019
|
this.collectTabs = () => {
|
|
989
1020
|
if (!this.tabElements.length) {
|
|
990
1021
|
this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
|
|
1022
|
+
this.tabElements.forEach((tab) => {
|
|
1023
|
+
if (tab.hasAttribute('name') && !this.active) {
|
|
1024
|
+
this.active = tab.getAttribute('name');
|
|
1025
|
+
}
|
|
1026
|
+
});
|
|
991
1027
|
}
|
|
992
1028
|
};
|
|
993
1029
|
}
|
|
994
1030
|
updateTabClasses() {
|
|
995
1031
|
this.tabElements.forEach((tab, i) => {
|
|
996
|
-
tab.classList.toggle('active', i === this.active);
|
|
1032
|
+
tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
|
|
997
1033
|
});
|
|
998
1034
|
}
|
|
999
|
-
handleTabClick(
|
|
1000
|
-
if (
|
|
1035
|
+
handleTabClick(active) {
|
|
1036
|
+
if (active === this.active)
|
|
1001
1037
|
return;
|
|
1002
|
-
this.active =
|
|
1003
|
-
this.
|
|
1038
|
+
this.active = active;
|
|
1039
|
+
this.activeChange.emit(Number(this.active) || this.active);
|
|
1040
|
+
}
|
|
1041
|
+
setTab(count = 1) {
|
|
1042
|
+
const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
|
|
1043
|
+
const tab = this.tabElements[currentIdx + count];
|
|
1044
|
+
if (tab && !(tab === null || tab === void 0 ? void 0 : tab.hasAttribute('disabled'))) {
|
|
1045
|
+
this.active = tab.getAttribute('name') || `${currentIdx + count}`;
|
|
1046
|
+
}
|
|
1004
1047
|
}
|
|
1005
1048
|
render() {
|
|
1006
|
-
|
|
1049
|
+
var _a, _b, _c;
|
|
1050
|
+
if (this.loading) {
|
|
1051
|
+
return (index.h(index.Host, { class: "xv-tabs", variant: this.variant }, index.h("xv-loader-v2", { size: SIZE_VAR.XL })));
|
|
1052
|
+
}
|
|
1053
|
+
return (index.h(index.Host, { class: "xv-tabs", variant: this.variant }, index.h("div", { class: "tab-headers", role: "tablist" }, index.h("button", { hidden: !this.showArrows || !((_a = this.tabElements) === null || _a === void 0 ? void 0 : _a.length), "aria-label": "Previous", class: "tab-headers_btn prev", onClick: () => this.setTab(-1) }), ((_b = this.tabElements) === null || _b === void 0 ? void 0 : _b.length) ? this.tabElements.map((tab, index$1) => (index.h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
|
|
1054
|
+
'tab-headers_tab': true,
|
|
1055
|
+
active: (tab.getAttribute('name') || `${index$1}`) === `${this.active}`,
|
|
1056
|
+
}, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index$1}`) }, tab.getAttribute('label') || `Tab ${index$1 + 1}`))) : this.emptyMessage && index.h("p", { class: "xv-tabs_empty" }, this.emptyMessage), index.h("button", { "aria-label": "Next", hidden: !this.showArrows || !((_c = this.tabElements) === null || _c === void 0 ? void 0 : _c.length), class: "tab-headers_btn next", onClick: () => this.setTab(1) })), index.h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, index.h("slot", { onSlotchange: this.collectTabs }))));
|
|
1007
1057
|
}
|
|
1008
1058
|
componentWillLoad() {
|
|
1009
1059
|
// this.collectTabs();
|
|
@@ -1034,7 +1084,7 @@ const XvTag = class {
|
|
|
1034
1084
|
this.closeClick.emit(e);
|
|
1035
1085
|
}
|
|
1036
1086
|
render() {
|
|
1037
|
-
return (index.h(index.Host, { key: '
|
|
1087
|
+
return (index.h(index.Host, { key: 'e7015e92932ed5f4d6d3acb68ab63628e4a4bcb6', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index.h("div", { key: '87a56eb93d86027dfcfa6c2e0edc22defe7628b4', class: "xv-tag_content" }, index.h("slot", { key: 'b71fb28fdbf29da81d8cc701f7a9b4bf0fc23c4d' })), this.closeable && (index.h("button", { key: 'f99c2fc938973a3809a355a8621cf161e185c46c', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
1038
1088
|
}
|
|
1039
1089
|
};
|
|
1040
1090
|
XvTag.style = XvTagV2Style0;
|
|
@@ -1052,6 +1102,7 @@ const XvTextInputV2Style0 = xvTextInputCss;
|
|
|
1052
1102
|
const XvTextInput = class {
|
|
1053
1103
|
constructor(hostRef) {
|
|
1054
1104
|
index.registerInstance(this, hostRef);
|
|
1105
|
+
this.valueChange = index.createEvent(this, "valueChange", 7);
|
|
1055
1106
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
1056
1107
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
1057
1108
|
}
|
|
@@ -1065,12 +1116,17 @@ const XvTextInput = class {
|
|
|
1065
1116
|
this.value = '';
|
|
1066
1117
|
this.disabled = false;
|
|
1067
1118
|
this.readonly = false;
|
|
1119
|
+
this.loading = false;
|
|
1068
1120
|
this.handleInput = (e) => {
|
|
1069
1121
|
const target = e.target;
|
|
1070
1122
|
this.value = target.value;
|
|
1123
|
+
this.valueChange.emit(this.value);
|
|
1071
1124
|
this.internals.setFormValue(target.value);
|
|
1072
1125
|
};
|
|
1073
1126
|
this.getControlIcon = (status) => {
|
|
1127
|
+
if (this.loading) {
|
|
1128
|
+
return index.h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
|
|
1129
|
+
}
|
|
1074
1130
|
switch (status) {
|
|
1075
1131
|
case TextInputStatus.ERROR: {
|
|
1076
1132
|
return (index.h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, index.h("path", { fill: "currentColor", d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z" })));
|
|
@@ -1082,7 +1138,7 @@ const XvTextInput = class {
|
|
|
1082
1138
|
};
|
|
1083
1139
|
}
|
|
1084
1140
|
render() {
|
|
1085
|
-
return (index.h(index.Host, { key: '
|
|
1141
|
+
return (index.h(index.Host, { key: '7e773cbebf4bd3bc6c2e71f454f733de77ec2b56', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && index.h("label", { key: 'a28eca6e736e747c5730d2b517cbcf33178a53af', class: "label" }, this.label), index.h("div", { key: 'c432a6ca83a94d1f160745b1f0f2e1a532441ccd', class: "control" }, index.h("input", { key: '5545a39193c180329fe382f8f9fd4aac5d79adcd', type: "text", class: { withIcon: this.status !== TextInputStatus.DEF }, readonly: this.readonly, value: this.value, disabled: this.disabled, onInput: this.handleInput, placeholder: this.placeholder }), this.getControlIcon(this.status)), this.helper && index.h("p", { key: 'ab7aee3589f336f3899afef307845466c4eee41e', class: "helper" }, this.helper)));
|
|
1086
1142
|
}
|
|
1087
1143
|
componentWillLoad() {
|
|
1088
1144
|
this.internals.setFormValue(this.value);
|
|
@@ -1092,7 +1148,7 @@ const XvTextInput = class {
|
|
|
1092
1148
|
};
|
|
1093
1149
|
XvTextInput.style = XvTextInputV2Style0;
|
|
1094
1150
|
|
|
1095
|
-
const xvTooltipCss = ":host{position:relative;display:inline-block;cursor:pointer;line-height:0.5}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out, transform 0.2s ease-in-out;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host::after{content:\"\";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}";
|
|
1151
|
+
const xvTooltipCss = ":host{position:relative;display:inline-block;cursor:pointer;line-height:0.5}:host::before,:host::after{position:absolute;opacity:0;visibility:hidden;transition:opacity 0.2s ease-in-out 0.5s, transform 0.2s ease-in-out 0.5s;z-index:10}:host::before{content:attr(tooltip);background:var(--background-inverse, #333);color:var(--icon-inverse, #fff);padding:var(--gap-sm, 5px) var(--gap-md, 16px);border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;font-family:var(--fz-body, Tahoma);font-size:var(fz-md, 14px);font-weight:400;line-height:18px;letter-spacing:0.16px}:host([multiline])::before{white-space:normal;min-width:300px}:host::after{content:\"\";border:6px solid transparent}:host(:hover)::before,:host(:hover)::after,:host(:focus)::before,:host(:focus)::after{opacity:1;visibility:visible}:host(.xv-tooltip_top)::before{bottom:100%;left:50%;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_top)::after{bottom:100%;left:50%;border-top-color:var(--background-inverse, #333);transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_top-left)::before{bottom:100%;left:0;transform:translateY(-5px)}:host(.xv-tooltip_top-left)::after{bottom:100%;left:10px;border-top-color:black;transform:translateY(5px)}:host(.xv-tooltip_top-right)::before{bottom:100%;right:0;transform:translateY(-5px)}:host(.xv-tooltip_top-right)::after{bottom:100%;right:10px;border-top-color:var(--background-inverse, #333);transform:translateY(5px)}:host(.xv-tooltip_bottom)::before{top:100%;left:50%;transform:translateX(-50%) translateY(5px)}:host(.xv-tooltip_bottom)::after{top:100%;left:50%;border-bottom-color:black;transform:translateX(-50%) translateY(-5px)}:host(.xv-tooltip_bottom-left)::before{top:100%;left:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-left)::after{top:100%;left:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_bottom-right)::before{top:100%;right:0;transform:translateY(5px)}:host(.xv-tooltip_bottom-right)::after{top:100%;right:10px;border-bottom-color:var(--background-inverse, #333);transform:translateY(-5px)}:host(.xv-tooltip_left)::before{right:100%;top:50%;transform:translateY(-50%) translateX(-5px)}:host(.xv-tooltip_left)::after{right:100%;top:50%;border-left-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::before{left:100%;top:50%;transform:translateY(-50%) translateX(5px)}:host(.xv-tooltip_right)::after{left:100%;top:50%;border-right-color:var(--background-inverse, #333);transform:translateY(-50%) translateX(-5px)}";
|
|
1096
1152
|
const XvTooltipV2Style0 = xvTooltipCss;
|
|
1097
1153
|
|
|
1098
1154
|
const XvTooltip = class {
|
|
@@ -1106,7 +1162,7 @@ const XvTooltip = class {
|
|
|
1106
1162
|
this.position = 'top';
|
|
1107
1163
|
}
|
|
1108
1164
|
render() {
|
|
1109
|
-
return (index.h(index.Host, { key: '
|
|
1165
|
+
return (index.h(index.Host, { key: 'caeab002ff02c6b43a1eefc52a59f0f0f6d5c75a', tooltip: this.message, class: `xv-tooltip_${this.position}` }, index.h("slot", { key: '9d873d03af5225e4f2d1cc607221044499c59485' }, index.h("svg", { key: 'b6a29a947bdcb7903e526c430cbbd6486ec496e4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index.h("path", { key: '43144f435eeaad899b446273309719e99283240f', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
|
|
1110
1166
|
}
|
|
1111
1167
|
};
|
|
1112
1168
|
XvTooltip.style = XvTooltipV2Style0;
|