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
|
@@ -242,7 +242,7 @@ const XvDropdown = class {
|
|
|
242
242
|
return values;
|
|
243
243
|
};
|
|
244
244
|
this.handleOpen = () => {
|
|
245
|
-
if (this.disabled || this.open)
|
|
245
|
+
if (this.disabled || this.open || this.loading)
|
|
246
246
|
return;
|
|
247
247
|
this.open = true;
|
|
248
248
|
};
|
|
@@ -320,7 +320,7 @@ const XvDropdown = class {
|
|
|
320
320
|
this.changeSelection.emit(this.setSelected(this.selectedMap, optionElements));
|
|
321
321
|
}
|
|
322
322
|
render() {
|
|
323
|
-
return (h(Host, { key: '
|
|
323
|
+
return (h(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 }, h("label", { key: '89822575a8ba145cfbc54bd40ae50021069243ea', class: "label" }, h("slot", { key: 'd09fa78e0df2f911160b059a1254dd09b1c2edcf', name: "label" }, this.label)), h("div", { key: 'a4cb541ee3ccca7148b11ff2a5455d9efb75831e', class: "xv-dropdown-control control", onClick: this.handleOpen }, this.selected.length ? (h("p", { class: "control_value" }, this.selected.join(', '))) : (h("p", { class: "control_placeholder" }, this.placeholder || '')), this.renderIcon(), 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" }, h("path", { key: '4e78ab3ba78ff63b21f2766887440b5d638fc5e6', d: "M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z" }))), this.open && h("div", { key: 'd3493338d8e5acd48a0c825843da13ba631e7050', class: "options" }, h("slot", { key: "xv-dropdown-options" })), (this.helper || this.error || this.warning) && (h("p", { key: 'b337cece3d8c4aeb4aedc10b0ef6669c19e27e30', class: "helper" }, this.error || this.warning || this.helper))));
|
|
324
324
|
}
|
|
325
325
|
componentWillLoad() {
|
|
326
326
|
this.setDefaultValues();
|
|
@@ -331,6 +331,18 @@ const XvDropdown = class {
|
|
|
331
331
|
disconnectedCallback() {
|
|
332
332
|
this.removeListeners();
|
|
333
333
|
}
|
|
334
|
+
renderIcon() {
|
|
335
|
+
if (this.loading) {
|
|
336
|
+
return h("xv-loader-v2", { class: "control_icon error", size: SIZE_VAR.XS });
|
|
337
|
+
}
|
|
338
|
+
if (this.error) {
|
|
339
|
+
return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, 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" })));
|
|
340
|
+
}
|
|
341
|
+
if (!this.error && !!this.warning) {
|
|
342
|
+
return (h("svg", { class: "control_icon warning", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, 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" })));
|
|
343
|
+
}
|
|
344
|
+
return undefined;
|
|
345
|
+
}
|
|
334
346
|
get el() { return getElement(this); }
|
|
335
347
|
static get watchers() { return {
|
|
336
348
|
"open": ["openChangeHandle"]
|
|
@@ -359,7 +371,7 @@ const XvDropdownItem = class {
|
|
|
359
371
|
});
|
|
360
372
|
}
|
|
361
373
|
render() {
|
|
362
|
-
return (h(Host, { key: '
|
|
374
|
+
return (h(Host, { key: '50c0bf3d6da015580b84ba455cc5f5b02a836fbb', class: "xv-dropdown-item", value: this.value, role: "option", tabindex: this.disabled ? -1 : false }, h("slot", { key: '3833346442861a6669a6fea827f7da3ef872861c' }), this.selected && h("span", { key: '139e1a037467cf98f363f172454a8a9122667955', class: "checkmark" })));
|
|
363
375
|
}
|
|
364
376
|
componentWillLoad() {
|
|
365
377
|
if (!this.value)
|
|
@@ -388,7 +400,7 @@ const Xvfooter = class {
|
|
|
388
400
|
}
|
|
389
401
|
}
|
|
390
402
|
render() {
|
|
391
|
-
return (h("footer", { key: '
|
|
403
|
+
return (h("footer", { key: '0db6bc4ceab1da36181d8a106677ee2b4c871a5d' }, h("div", { key: '4ed868bc230e7dd45ebca9255827c1cfeb40e1f7', innerHTML: this.htmlContent })));
|
|
392
404
|
}
|
|
393
405
|
get el() { return getElement(this); }
|
|
394
406
|
};
|
|
@@ -422,13 +434,13 @@ const XvHeader = class {
|
|
|
422
434
|
}
|
|
423
435
|
}
|
|
424
436
|
render() {
|
|
425
|
-
return (h("div", { key: '
|
|
437
|
+
return (h("div", { key: 'fb841d4abad14c4387fe46688c4f3af2307b886a', id: "nav-container", class: "xv-header" }, h("nav", { key: '58e74fe05d964a92caa4557b80507a38c4a98179', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, h("div", { key: '97ea3528c6e075c1d387ea24594f91104d7b8867', class: "container" }, h("div", { key: '8bdd52c37bcec11ea6b30d0174736f59788b53eb', class: "row" }, h("div", { key: 'e449f3feac1044f052ec6e2617c0d935064656c7', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, h("div", { key: '55a1d17cba703a6e40eb338c7543dc6976bf38a9', class: "navbar-header" }, h("button", { key: '4db1d1c007cce64e85d9c4bed564d2871ababcfc', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, h("i", { key: '65e325b62f0438edd702620c4e17a53219967a0a', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), h("div", { key: '441bfb68db2009ee3237b77d81fb95dc81aa481f', class: "visible-xs-inline" }, h("a", { key: 'addb8f9d2564bb51622d446709200f1f11ca5676', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: 'e3397a1cce10f32d84b329d7e0f86a668b59f0ce', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), h("div", { key: '90f493fdfb861b43a6e15fd98f4b20b5c27393f1', class: "hidden-xs" }, h("a", { key: '91d6cc6a27a1a1345453b6e61bffc75dd8af8dac', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '3e865f04a2b4fd3518d9afdb6e14c1ff40fe316f', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), h("div", { key: 'f93d3819bb445cdb9e5af3aef12b015a343d6310', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, h("ul", { key: 'f45ff2bde04e59dcf6b64843540aa3fd4e40f689', class: "nav nav-pills nav-meta pull-right" }, h("li", { key: 'ed84b8372b0d2bb667a8cafadb4ab563da5abfe0' }, h("a", { key: '13a62dee054906b573e6680101a3ca0b21b831a0', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, h("i", { key: '0baabbb18c07000acd90290323c9634be9c4fc7c', class: "fa fa-user" }), h("i", { key: 'd704cea8700026507e77c06ef9b9ed7debabe817', class: "fa fa-exchange-alt" }))), h("li", { key: '71071c96004f83a4aaf0c882139da925e42866a8' }, h("a", { key: 'e408f1d8d07134e922871ad2cf528f1593d0d1e0', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), h("a", { key: 'c646eb76e06b7dbdc38b2c2781271413d2fd15ea', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), h("a", { key: '0af75819d57f535803e52289ff96fac569c50300', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, h("i", { key: '5bbb8f180b8e305b03b6fdfec3390582b0150d5d', class: "fa fa-phone" }))), h("li", { key: 'eccf3a963e94fbfd5d0bac632583bf1bb8ae75af', class: "dropdown", id: "my-xv-menu" }, h("a", { key: 'c08b078cf111d3b68521eae23b80ca6f179462ca', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, h("i", { key: '64624fbad4dfcf0249e8cfeb40bf6724d1546b06', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", h("span", { key: '7cb9c97ba9717c43d5ca6f590434dd925e523726', class: "hidden-xs" }, "Mein Bereich"), h("span", { key: '96609dcd1f21c1de3f6b5921bf8d0d21414e16ba', class: "caret" })), h("ul", { key: '89d95f1a1620aba9e971ea4f2b53d5e82634dcb7', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, h("li", { key: 'f995fffeb04c8e71855e333d1bcb88fa96cf138b' }, h("a", { key: '4f4109b08bd7fb0e0beff296a5566f447febb72e', href: "#" }, h("i", { key: '4676a42f1d33aca1fa82c39c66ad852d4a46a90b', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", h("i", { key: '8f786200fa2781591c930bf2f8c5bcaab9c26ee6', class: "fa fa-caret-down" }))), h("li", { key: 'cbbe6aea9589e291677d1d4a9545b6338c515f59' }, h("a", { key: '90d02c4e0ffd7c880d5a054bd93efad517c17cf1', href: "#" }, h("i", { key: 'a658d4354d00bc1b33bdbabdd67c2822c0bbadd7', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", h("i", { key: 'a2a4d953a2f7ab3becd94609a063bd41444f1d5e', class: "fa fa-caret-down" }))), h("li", { key: '45f2e6536719387d007c300569bd888ab73a368e', role: "separator", class: "divider" }), h("li", { key: 'c1b3c21287ad9c948994a7e66b5598f2d7b92cee' }, h("a", { key: '4577bb088ee70c827a6c73670ab333c1e7233ebb', href: "#" }, h("i", { key: '59190e441f77825b6faa7f1a6a126b55368424bd', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", h("span", { key: '56c84bb9710788f708f66a29b8ed2560eddcdc9c', class: "badge" }, "0"), h("i", { key: '3a94b49a78254ff80c748031879499e0b1c3d6cd', class: "fa fa-caret-down" }))), h("li", { key: '56c19ee479dd30ef4b2a3ced111c5a2488b011be' }, h("a", { key: 'bf6795b1a369fd48144a5c3f2d6dde87329005d3', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, h("i", { key: 'd74387b0a971ec31ef52f7275a4059135f7a2f2e', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), h("li", { key: '4cd39d21f39cf38b653fe354fcac95541ed3b5d4', class: "visible-sm-block visible-xs-block hidden-xxs" }, h("a", { key: 'ff7d151d063d17b4937c8adee7240928abf11ca1', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, h("i", { key: 'e921298a0e809efa116a19445211146af7ff478c', class: "fa fa-search", "aria-hidden": "true" }))), h("li", { key: 'daa6740a57a697e93099a9acf0f290103e38885e', class: "hidden-md hidden-lg" }, 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" }, h("i", { key: '29eaea9f9d7c099b0666aa80c0baa47f0194eca8', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: '2e32a44fff79ce051c6478911dff06ab014fcb03', class: "hidden-xs" }, "Login"))), h("li", { key: '70aad34ed65c79187309b6d43c2d60a4c50c10f7', class: "hidden-xs hidden-sm" }, h("a", { key: '0700efbabecfcc3c23703d5ef51d455cc37a7c76', role: "button", class: "btn btn-default navbar-btn btn-link", "data-toggle": "modal", "data-target": "#login-modal" }, h("i", { key: 'dacc64c5ec7a805a82c04786942045d34f9f5505', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: '6862516762bb49b3268ab5439616e5d84eeee33a' }, "Login"))), h("li", { key: '1465c89bc216b466eb9b502503c4e071522b949e', class: "hidden-xs" }, h("a", { key: '4fb628fc7e3713032c8cc6291bea0364549ec486', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, h("span", { key: 'bd27d18587f03bb6579a68ec0f67e401e9a2f4aa' }, "Registrieren"))), h("li", { key: 'b58c8bdfcba9fbcc4fc9abcc7a532552a6bf4d59', class: "navbar-divider hidden-xs" }), h("li", { key: '9c184e2e5ce45a573f227427b21511efb77a7367' }, h("a", { key: '4e1e2905fa27feef5ee4d7e8d08cf8f365460aa9', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, h("span", { key: 'bc461fb3883487c5a9bab6171e0395d896871dae', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), h("span", { key: '798befbada9c958f75aa71534223bfc3053e2d8a', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), h("span", { key: '466810cee52d04c975304e2644a19b0fed8acb52', class: "badge badge-success" }, "0"))))))), h("div", { key: 'df2e0fdf3ee050571555b538a13b81255a5ed6d6', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, h("div", { key: 'aa8e481da43b4d19fef2ebe5f18c3f698188109a', class: "container" }, h("form", { key: '1f74f4c3728f1dbc53ee160316cfc503a05d1809', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, h("div", { key: '3b0a8b8e0422baeabf49bc2acbd416ce3d0d0f4d', class: "input-group" }, h("input", { key: '81b1da2dc533688f68238fde64d2b0137143bfa0', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), h("span", { key: '1bd05fa901a518fbfe48044a73d6b134699c1aeb', class: "input-group-btn force-full-width" }, h("button", { key: '825112ca880ad4ca36e449def155c87f1b134168', class: "btn btn-default search-addon", type: "submit" }, h("i", { key: '2812b8d6e635a3c8d971982340e70c1aa1d72072', class: "fa fa-search", "aria-hidden": "true" })))))))), h("div", { key: '33abf8e8dbe83d92a154f9487ba37826e0c3befe', innerHTML: this.htmlContent })));
|
|
426
438
|
}
|
|
427
439
|
get el() { return getElement(this); }
|
|
428
440
|
};
|
|
429
441
|
XvHeader.style = XvHeaderStyle0;
|
|
430
442
|
|
|
431
|
-
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%}";
|
|
443
|
+
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%}";
|
|
432
444
|
const XvLinkV2Style0 = xvLinkCss;
|
|
433
445
|
|
|
434
446
|
const XvLink = class {
|
|
@@ -445,7 +457,7 @@ const XvLink = class {
|
|
|
445
457
|
e.stopPropagation();
|
|
446
458
|
}
|
|
447
459
|
render() {
|
|
448
|
-
return (h(Host, { key: '
|
|
460
|
+
return (h(Host, { key: 'de2c35e526a84d4f0ea3d309e9b338951cebf205', class: `xv-link_${this.variant}` }, 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 }, h("slot", { key: 'f921c3064a1372e1855fa41cd65f5dda53a98913', name: "icon-left" }), h("slot", { key: '6250191343e6676a7db35ff087e31ddc4f2a6f66' }), h("slot", { key: 'fc091c32addf4a4f1d2616b24f121325921f5954', name: "icon-right" }))));
|
|
449
461
|
}
|
|
450
462
|
};
|
|
451
463
|
XvLink.style = XvLinkV2Style0;
|
|
@@ -477,13 +489,13 @@ const XvLoader = class {
|
|
|
477
489
|
};
|
|
478
490
|
XvLoader.style = XvLoaderV2Style0;
|
|
479
491
|
|
|
480
|
-
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}}";
|
|
492
|
+
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}}";
|
|
481
493
|
const XvModalV2Style0 = xvModalCss;
|
|
482
494
|
|
|
483
495
|
const XvModal = class {
|
|
484
496
|
constructor(hostRef) {
|
|
485
497
|
registerInstance(this, hostRef);
|
|
486
|
-
this.
|
|
498
|
+
this.openChange = createEvent(this, "openChange", 7);
|
|
487
499
|
/**
|
|
488
500
|
* Is modal opened
|
|
489
501
|
*/
|
|
@@ -496,6 +508,10 @@ const XvModal = class {
|
|
|
496
508
|
* Size of modal. But max size is 90% view width
|
|
497
509
|
*/
|
|
498
510
|
this.size = SIZE_VAR.MD;
|
|
511
|
+
/**
|
|
512
|
+
* When need scroll modal content
|
|
513
|
+
*/
|
|
514
|
+
this.overflow = true;
|
|
499
515
|
this.triggerEl = null;
|
|
500
516
|
this.onBackdropClick = async (e) => {
|
|
501
517
|
if (this.permanent)
|
|
@@ -524,19 +540,19 @@ const XvModal = class {
|
|
|
524
540
|
async openModal() {
|
|
525
541
|
var _a;
|
|
526
542
|
this.open = true;
|
|
527
|
-
(_a = this.
|
|
543
|
+
(_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
|
|
528
544
|
return this.open;
|
|
529
545
|
}
|
|
530
546
|
;
|
|
531
547
|
async closeModal() {
|
|
532
548
|
var _a;
|
|
533
549
|
this.open = false;
|
|
534
|
-
(_a = this.
|
|
550
|
+
(_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
|
|
535
551
|
return this.open;
|
|
536
552
|
}
|
|
537
553
|
render() {
|
|
538
554
|
var _a;
|
|
539
|
-
return (h(Host, { key: '
|
|
555
|
+
return (h(Host, { key: '2366289d47548d714bbdd49948f792f351f28f08', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '5315e7fff2a42c9cacff80f8123198b3b478afb9', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: 'de7fd67203a1728be67f86a2ea40279d93faa17c', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '088329b5f8624893d0e6a70de8e5320b555ca917', class: "modal" }, h("button", { key: '930e3e2f153a8b29ad072d3293ceff42d4f29467', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '454958176af3ffe3a3ce05fcd4676498ba64ed7d', class: "modal_header" }, h("slot", { key: 'c36847fd99974fe853eedebaab7d35b14895fc62', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '967825b4cf637c6fde19330fda5b88fc63aee479', class: "modal_header__title" }, this.el.title))), h("div", { key: '6ea2df2fa221a02655c9d981565132879901bbe7', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '2636c2c24cfc4faf7561f2c4d5a380f23ce904e8' })), h("div", { key: 'cb4d838daf7bc1e8fb4c029318250ec2f3e7a37a', class: "modal_footer" }, h("slot", { key: '79b371cb00c2152a1131be31202f7c8061a4b61b', name: "footer" }))))));
|
|
540
556
|
}
|
|
541
557
|
disconnectedCallback() {
|
|
542
558
|
this.removeTriggerListener();
|
|
@@ -583,14 +599,14 @@ const XvNotification = class {
|
|
|
583
599
|
};
|
|
584
600
|
}
|
|
585
601
|
render() {
|
|
586
|
-
return (h(Host, { key: '
|
|
602
|
+
return (h(Host, { key: '910f05cb3632aee19f893969b3f2225890586cfb', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: '575f30f393d7bf69f7ac4b7c14cc08742ea37a02', class: "content" }, h("div", { key: '9df87a020f9b0eeaa37b4162e930e3d73db4eba5', class: "content_wrapper" }, this.el.title && h("h5", { key: '6aceb1370abd0511d94def7830c203f8e51ad84b', class: "content_title" }, this.el.title), h("slot", { key: 'c053806cacc705dc3cfbba53c36dc761ca995e87' })), h("slot", { key: '7967d656c6541a9f21cb2a2cd87376915c21f0c3', name: "footer" })), this.dismissible && h("button", { key: '0cb3d1e44bb0f84f8a72f1ac7875364911fb4fa7', class: "close", onClick: this.closeHandle })));
|
|
587
603
|
}
|
|
588
604
|
static get assetsDirs() { return ["xv-notification/icons"]; }
|
|
589
605
|
get el() { return getElement(this); }
|
|
590
606
|
};
|
|
591
607
|
XvNotification.style = XvNotificationV2Style0;
|
|
592
608
|
|
|
593
|
-
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)}";
|
|
609
|
+
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)}";
|
|
594
610
|
const XvOverflowMenuV2Style0 = xvOverflowMenuCss;
|
|
595
611
|
|
|
596
612
|
const XvOverflowMenu = class {
|
|
@@ -643,7 +659,7 @@ const XvOverflowMenu = class {
|
|
|
643
659
|
}
|
|
644
660
|
}
|
|
645
661
|
render() {
|
|
646
|
-
return (h(Host, { key: '
|
|
662
|
+
return (h(Host, { key: '4a9f6f2c8a5a4f3c4d1b8c666930b51ccab80228', class: "xv-overflow-menu", size: this.size, role: "menu", tabindex: -1 }, h("button", { key: 'd55471ea38b1f3bf3d04054ff310f616d3c1cd4d', class: { btn: true, open: this.open }, onClick: this.onOpenToggle, disabled: this.disabled }, h("svg", { key: '70d5c2fd85655ecc48060d31a3ac3e2d822b33ce', xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 128 512" }, 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" }))), h("div", { key: '0c57895d318dc03c502f28a1b175aee7cc14c573', class: { list: true, open: this.open, [`position-${this.position}`]: true } }, h("slot", { key: 'd5645b5bce743e4cc8eae0c271379d212926c3b2' }))));
|
|
647
663
|
}
|
|
648
664
|
componentDidLoad() {
|
|
649
665
|
this.openChangeHandle();
|
|
@@ -680,7 +696,7 @@ const XvOverflowMenuItem = class {
|
|
|
680
696
|
this.itemClick.emit({ event, value: this.value });
|
|
681
697
|
}
|
|
682
698
|
render() {
|
|
683
|
-
return (h(Host, { key: '
|
|
699
|
+
return (h(Host, { key: '8dc660c2d77b3885eb0b164633874047ca89058c', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '557ee1f91a59d867bae782b7352688f091c3228b' })));
|
|
684
700
|
}
|
|
685
701
|
};
|
|
686
702
|
XvOverflowMenuItem.style = XvOverflowMenuV2ItemStyle0;
|
|
@@ -755,7 +771,7 @@ const XvProgressIndicator = class {
|
|
|
755
771
|
this.updateChildItems();
|
|
756
772
|
}
|
|
757
773
|
render() {
|
|
758
|
-
return (h(Host, { key: '
|
|
774
|
+
return (h(Host, { key: '00ad521136d02deaedb3984ff711d23ff0853062', variant: this.variant, size: this.size, class: { 'xv-progress-indicator': true } }, h("slot", { key: '054dbfebd8387688975665058d9bba3903a768fc' })));
|
|
759
775
|
}
|
|
760
776
|
get el() { return getElement(this); }
|
|
761
777
|
static get watchers() { return {
|
|
@@ -773,27 +789,28 @@ const XvProgressIndicatorItem = class {
|
|
|
773
789
|
this.status = PROGRESS_ITEM_STATUS.NO_STARTED;
|
|
774
790
|
}
|
|
775
791
|
render() {
|
|
776
|
-
return (h(Host, { key: '
|
|
792
|
+
return (h(Host, { key: '79acb016d3774423ebc4b4fca110a2ac450358ff', status: this.status, class: { 'xv-progress-indicator-item': true } }, h("span", { key: 'da650032b1e038635c5bbbbdabcf8de3d510c162', class: "line" }), h("span", { key: 'b3cfcdca102ea9d180b711a90a3a735b1faf0296', class: "icon" }, h("svg", { key: 'ad92853715e40b74c291867a158759cfd13ff9af', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512" }, 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" }))), h("p", { key: '9c47e82f96314c2e0868c6c67ff9c0b4b66eec4f', class: "label" }, h("slot", { key: '5730d018f363e84fb299877ee854360eb42b06ce' }))));
|
|
777
793
|
}
|
|
778
794
|
get el() { return getElement(this); }
|
|
779
795
|
};
|
|
780
796
|
XvProgressIndicatorItem.style = XvProgressIndicatorV2ItemStyle0;
|
|
781
797
|
|
|
782
|
-
const xvTabCss = ":host{display:block}";
|
|
798
|
+
const xvTabCss = ":host{display:block}:host([loading]){display:flex;align-items:center;justify-content:center;min-height:200px}";
|
|
783
799
|
const XvTabV2Style0 = xvTabCss;
|
|
784
800
|
|
|
785
801
|
const XvTab = class {
|
|
786
802
|
constructor(hostRef) {
|
|
787
803
|
registerInstance(this, hostRef);
|
|
788
804
|
this.disabled = false;
|
|
805
|
+
this.loading = false;
|
|
789
806
|
}
|
|
790
807
|
render() {
|
|
791
|
-
return h(Host, { key: '
|
|
808
|
+
return (h(Host, { key: '82d797fe902cd4dab29cf094485aad742835e6b4', disabled: this.disabled, name: this.name }, this.loading ? h("xv-loader-v2", { size: SIZE_VAR.LG }) : h("slot", null)));
|
|
792
809
|
}
|
|
793
810
|
};
|
|
794
811
|
XvTab.style = XvTabV2Style0;
|
|
795
812
|
|
|
796
|
-
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}";
|
|
813
|
+
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}";
|
|
797
814
|
const XvTableV2Style0 = xvTableCss;
|
|
798
815
|
|
|
799
816
|
const XvTable = class {
|
|
@@ -802,7 +819,7 @@ const XvTable = class {
|
|
|
802
819
|
this.selected = new Map();
|
|
803
820
|
this.selectedCount = 0;
|
|
804
821
|
}
|
|
805
|
-
|
|
822
|
+
handleCheckedChange({ detail }) {
|
|
806
823
|
if (detail.header || detail.expandable)
|
|
807
824
|
return;
|
|
808
825
|
if (detail.checked) {
|
|
@@ -828,12 +845,15 @@ const XvTable = class {
|
|
|
828
845
|
.join(' ') + ' repeat(auto-fit, minmax(0, 1fr))');
|
|
829
846
|
}
|
|
830
847
|
render() {
|
|
831
|
-
return (h(Host, { key: '
|
|
848
|
+
return (h(Host, { key: 'd661040bcec38c039dd3ae7516fa40bfb0274da7', class: { batchVisible: !!this.selectedCount } }, h("slot", { key: 'a341cf9b6bf250dbf0dbee0bf17da8a734be7a31', name: "title" }, !!this.el.title && h("h2", { key: 'bf33335fe741ebae458f3dcc02d1d65ac4c75ddd', class: "xv-table-title" }, this.el.title)), h("slot", { key: 'b7504f0b48d538ce6d4c1fb7706e1ab8bce8bd8c', name: "toolbar" }), h("div", { key: '54b51b51171726650858ce3484c1d510dd88796c', class: "xv-table" }, h("div", { key: '22f7f3638901e4f80acee21696ee4ae8d7e01ad4', class: "batch-actions" }, h(Fragment, { key: '922d574d34d7ff5632a9b5489bbf4b205f64f3bd' }, h("div", { key: 'eb7a82cda62bb1084715d446da1ca082c7ff6f37', class: "batch-actions_content" }, h("slot", { key: 'eb95cf88821c541e71b1620ce0d79bbe196a16e8', name: "batch" })), h("p", { key: '050dbbefa2fc8adfffbbb12652964279bd5b69d4', class: "batch-actions_count" }, !!this.selectedCount && `${this.selectedCount} ${this.selectedCount === 1 ? 'Position ausgewählt' : 'Positionen ausgewählt'}`))), h("slot", { key: '8dcfa43420bad4a128b15f1095556eeac062939c' }), h("slot", { key: '588776181bded66364751e3e2e5fd9713084aee7', name: "footer" }), !!this.loading && (h("div", { key: '1478a55759576d012c5dbb3a630309fe42bc527f', class: "xv-table_loading" }, h("xv-loader-v2", { key: '822799790a03089ff83a99a49fa0f8fb4b9f36b0', size: SIZE_VAR.LG }))))));
|
|
832
849
|
}
|
|
833
850
|
componentWillLoad() {
|
|
834
851
|
this.setColsSizeTemplate();
|
|
835
852
|
}
|
|
836
853
|
get el() { return getElement(this); }
|
|
854
|
+
static get watchers() { return {
|
|
855
|
+
"colsSize": ["setColsSizeTemplate"]
|
|
856
|
+
}; }
|
|
837
857
|
};
|
|
838
858
|
XvTable.style = XvTableV2Style0;
|
|
839
859
|
|
|
@@ -846,7 +866,7 @@ var XV_SORT_DIR;
|
|
|
846
866
|
const XV_EXPANDABLE_KEY = 'expandable';
|
|
847
867
|
const XV_TABLE_TAG = 'xv-table-v2';
|
|
848
868
|
|
|
849
|
-
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}";
|
|
869
|
+
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}";
|
|
850
870
|
const XvTableV2CellStyle0 = xvTableCellCss;
|
|
851
871
|
|
|
852
872
|
const XvTableCell = class {
|
|
@@ -874,7 +894,7 @@ const XvTableCell = class {
|
|
|
874
894
|
}
|
|
875
895
|
;
|
|
876
896
|
render() {
|
|
877
|
-
return (h(Host, { key: '
|
|
897
|
+
return (h(Host, { key: 'a2b8e397dcc44ae5a4e018f655586ef4e4900564' }, h("slot", { key: '9b2f63ba4c33f03cb55030d87b4da14a2745ecc3' })));
|
|
878
898
|
}
|
|
879
899
|
get el() { return getElement(this); }
|
|
880
900
|
};
|
|
@@ -893,7 +913,7 @@ const XvTableExpand = class {
|
|
|
893
913
|
};
|
|
894
914
|
}
|
|
895
915
|
render() {
|
|
896
|
-
return (h(Host, { key: '
|
|
916
|
+
return (h(Host, { key: 'f7aca6da5b9345c3c1b5777577f22cfa6f203050' }, h("button", { key: '5c503f211c763cbfa0fb9b8327146e92bb803eef', class: { 'expand-btn': true, open: this.open }, disabled: this.disabled, onClick: this.handleExpand }), h("slot", { key: 'f55a433ebf374f2a03381035846b3c180b5e8852', name: XV_EXPANDABLE_KEY }), h("div", { key: '9b6f5e487e156a6f3e14a0aa7a10065410de0cca', class: { expandableContent: true, open: this.open } }, h("slot", { key: 'ac9992699f28465a63346ebdf3f638b8fd53ec15' }))));
|
|
897
917
|
}
|
|
898
918
|
componentDidLoad() {
|
|
899
919
|
setAttr(this.el.parentElement, XV_EXPANDABLE_KEY, true);
|
|
@@ -902,23 +922,34 @@ const XvTableExpand = class {
|
|
|
902
922
|
};
|
|
903
923
|
XvTableExpand.style = XvTableV2ExpandStyle0;
|
|
904
924
|
|
|
905
|
-
const xvTableRowCss = ":host{display:grid;
|
|
925
|
+
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}";
|
|
906
926
|
const XvTableV2RowStyle0 = xvTableRowCss;
|
|
907
927
|
|
|
908
928
|
const XvTableRow = class {
|
|
909
929
|
constructor(hostRef) {
|
|
910
930
|
registerInstance(this, hostRef);
|
|
931
|
+
this.checkedChange = createEvent(this, "checkedChange", 7);
|
|
911
932
|
this.selectRow = createEvent(this, "selectRow", 7);
|
|
912
933
|
this.checkHandle = ({ detail: checked }) => {
|
|
913
934
|
this.checked = checked;
|
|
914
935
|
if (!checked && this.partial)
|
|
915
936
|
this.partial = checked;
|
|
937
|
+
if (!this.name)
|
|
938
|
+
this.name = uidGenerator();
|
|
939
|
+
this.selectRow.emit({
|
|
940
|
+
name: this.name,
|
|
941
|
+
value: this.value,
|
|
942
|
+
checked: this.checked,
|
|
943
|
+
partial: this.partial,
|
|
944
|
+
header: this.header,
|
|
945
|
+
expandable: this.el.getAttribute('slot') === XV_EXPANDABLE_KEY,
|
|
946
|
+
});
|
|
916
947
|
};
|
|
917
948
|
}
|
|
918
949
|
checkedChangeHandle() {
|
|
919
950
|
if (!this.name)
|
|
920
951
|
this.name = uidGenerator();
|
|
921
|
-
this.
|
|
952
|
+
this.checkedChange.emit({
|
|
922
953
|
name: this.name,
|
|
923
954
|
value: this.value,
|
|
924
955
|
checked: this.checked,
|
|
@@ -939,7 +970,7 @@ const XvTableRow = class {
|
|
|
939
970
|
}
|
|
940
971
|
}
|
|
941
972
|
render() {
|
|
942
|
-
return (h(Host, { key: '
|
|
973
|
+
return (h(Host, { key: 'a83693a0ac8a484e77d6569e9c5e6d5552d1e4bd' }, this.variant !== undefined && (h("xv-table-v2-cell", { key: '79c530cedc2dedfe7a3f30cca998d96e8e26e68d', class: "cell-control" }, this.variant === 'checkbox' && (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' && (h("input", { key: 'e39cc7c88c199863810e4b261bc833cac4f5d883', type: "radio", name: this.name, checked: this.checked || this.partial, disabled: this.disabled, required: this.required, readonly: this.readonly })))), h("slot", { key: '17151fe90edcb037bc504f88a33bd206e684c402' })));
|
|
943
974
|
}
|
|
944
975
|
componentWillLoad() {
|
|
945
976
|
this.setInitialAttrs();
|
|
@@ -962,13 +993,13 @@ var TABS_VATIANT;
|
|
|
962
993
|
// other variants will be here
|
|
963
994
|
})(TABS_VATIANT || (TABS_VATIANT = {}));
|
|
964
995
|
|
|
965
|
-
const xvTabsCss = ":host(.xv-tabs){display:flex;flex-direction:column}:host(.xv-tabs) .tab-headers{display:flex}:host(.xv-tabs) .tab-
|
|
996
|
+
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}";
|
|
966
997
|
const XvTabsV2Style0 = xvTabsCss;
|
|
967
998
|
|
|
968
999
|
const XvTabs = class {
|
|
969
1000
|
constructor(hostRef) {
|
|
970
1001
|
registerInstance(this, hostRef);
|
|
971
|
-
this.
|
|
1002
|
+
this.activeChange = createEvent(this, "activeChange", 7);
|
|
972
1003
|
/**
|
|
973
1004
|
* Index of active tab
|
|
974
1005
|
*/
|
|
@@ -984,22 +1015,41 @@ const XvTabs = class {
|
|
|
984
1015
|
this.collectTabs = () => {
|
|
985
1016
|
if (!this.tabElements.length) {
|
|
986
1017
|
this.tabElements = Array.from(this.el.querySelectorAll(TAB_TAGS.TAB));
|
|
1018
|
+
this.tabElements.forEach((tab) => {
|
|
1019
|
+
if (tab.hasAttribute('name') && !this.active) {
|
|
1020
|
+
this.active = tab.getAttribute('name');
|
|
1021
|
+
}
|
|
1022
|
+
});
|
|
987
1023
|
}
|
|
988
1024
|
};
|
|
989
1025
|
}
|
|
990
1026
|
updateTabClasses() {
|
|
991
1027
|
this.tabElements.forEach((tab, i) => {
|
|
992
|
-
tab.classList.toggle('active', i === this.active);
|
|
1028
|
+
tab.classList.toggle('active', (tab.getAttribute('name') || `${i}`) === `${this.active}`);
|
|
993
1029
|
});
|
|
994
1030
|
}
|
|
995
|
-
handleTabClick(
|
|
996
|
-
if (
|
|
1031
|
+
handleTabClick(active) {
|
|
1032
|
+
if (active === this.active)
|
|
997
1033
|
return;
|
|
998
|
-
this.active =
|
|
999
|
-
this.
|
|
1034
|
+
this.active = active;
|
|
1035
|
+
this.activeChange.emit(Number(this.active) || this.active);
|
|
1036
|
+
}
|
|
1037
|
+
setTab(count = 1) {
|
|
1038
|
+
const currentIdx = this.tabElements.findIndex((tab, i) => (tab.getAttribute('name') || `${i}`) === `${this.active}`);
|
|
1039
|
+
const tab = this.tabElements[currentIdx + count];
|
|
1040
|
+
if (tab && !(tab === null || tab === void 0 ? void 0 : tab.hasAttribute('disabled'))) {
|
|
1041
|
+
this.active = tab.getAttribute('name') || `${currentIdx + count}`;
|
|
1042
|
+
}
|
|
1000
1043
|
}
|
|
1001
1044
|
render() {
|
|
1002
|
-
|
|
1045
|
+
var _a, _b, _c;
|
|
1046
|
+
if (this.loading) {
|
|
1047
|
+
return (h(Host, { class: "xv-tabs", variant: this.variant }, h("xv-loader-v2", { size: SIZE_VAR.XL })));
|
|
1048
|
+
}
|
|
1049
|
+
return (h(Host, { class: "xv-tabs", variant: this.variant }, h("div", { class: "tab-headers", role: "tablist" }, 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) => (h("button", { role: "tab", disabled: !!tab.getAttribute('disabled') || !!(tab === null || tab === void 0 ? void 0 : tab.disabled), class: {
|
|
1050
|
+
'tab-headers_tab': true,
|
|
1051
|
+
active: (tab.getAttribute('name') || `${index}`) === `${this.active}`,
|
|
1052
|
+
}, onClick: () => this.handleTabClick(tab.getAttribute('name') || `${index}`) }, tab.getAttribute('label') || `Tab ${index + 1}`))) : this.emptyMessage && h("p", { class: "xv-tabs_empty" }, this.emptyMessage), 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) })), h("div", { class: "tab-content-wrapper", role: "tabpanel", tabindex: -1 }, h("slot", { onSlotchange: this.collectTabs }))));
|
|
1003
1053
|
}
|
|
1004
1054
|
componentWillLoad() {
|
|
1005
1055
|
// this.collectTabs();
|
|
@@ -1030,7 +1080,7 @@ const XvTag = class {
|
|
|
1030
1080
|
this.closeClick.emit(e);
|
|
1031
1081
|
}
|
|
1032
1082
|
render() {
|
|
1033
|
-
return (h(Host, { key: '
|
|
1083
|
+
return (h(Host, { key: 'e7015e92932ed5f4d6d3acb68ab63628e4a4bcb6', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: '87a56eb93d86027dfcfa6c2e0edc22defe7628b4', class: "xv-tag_content" }, h("slot", { key: 'b71fb28fdbf29da81d8cc701f7a9b4bf0fc23c4d' })), this.closeable && (h("button", { key: 'f99c2fc938973a3809a355a8621cf161e185c46c', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
|
|
1034
1084
|
}
|
|
1035
1085
|
};
|
|
1036
1086
|
XvTag.style = XvTagV2Style0;
|
|
@@ -1048,6 +1098,7 @@ const XvTextInputV2Style0 = xvTextInputCss;
|
|
|
1048
1098
|
const XvTextInput = class {
|
|
1049
1099
|
constructor(hostRef) {
|
|
1050
1100
|
registerInstance(this, hostRef);
|
|
1101
|
+
this.valueChange = createEvent(this, "valueChange", 7);
|
|
1051
1102
|
if (hostRef.$hostElement$["s-ei"]) {
|
|
1052
1103
|
this.internals = hostRef.$hostElement$["s-ei"];
|
|
1053
1104
|
}
|
|
@@ -1061,12 +1112,17 @@ const XvTextInput = class {
|
|
|
1061
1112
|
this.value = '';
|
|
1062
1113
|
this.disabled = false;
|
|
1063
1114
|
this.readonly = false;
|
|
1115
|
+
this.loading = false;
|
|
1064
1116
|
this.handleInput = (e) => {
|
|
1065
1117
|
const target = e.target;
|
|
1066
1118
|
this.value = target.value;
|
|
1119
|
+
this.valueChange.emit(this.value);
|
|
1067
1120
|
this.internals.setFormValue(target.value);
|
|
1068
1121
|
};
|
|
1069
1122
|
this.getControlIcon = (status) => {
|
|
1123
|
+
if (this.loading) {
|
|
1124
|
+
return h("xv-loader-v2", { class: "control_icon", size: SIZE_VAR.XS });
|
|
1125
|
+
}
|
|
1070
1126
|
switch (status) {
|
|
1071
1127
|
case TextInputStatus.ERROR: {
|
|
1072
1128
|
return (h("svg", { class: "control_icon error", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, 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" })));
|
|
@@ -1078,7 +1134,7 @@ const XvTextInput = class {
|
|
|
1078
1134
|
};
|
|
1079
1135
|
}
|
|
1080
1136
|
render() {
|
|
1081
|
-
return (h(Host, { key: '
|
|
1137
|
+
return (h(Host, { key: '7e773cbebf4bd3bc6c2e71f454f733de77ec2b56', name: this.name, class: "xv-text-input", role: "textbox", tabindex: this.disabled ? -1 : false }, this.label && h("label", { key: 'a28eca6e736e747c5730d2b517cbcf33178a53af', class: "label" }, this.label), h("div", { key: 'c432a6ca83a94d1f160745b1f0f2e1a532441ccd', class: "control" }, 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 && h("p", { key: 'ab7aee3589f336f3899afef307845466c4eee41e', class: "helper" }, this.helper)));
|
|
1082
1138
|
}
|
|
1083
1139
|
componentWillLoad() {
|
|
1084
1140
|
this.internals.setFormValue(this.value);
|
|
@@ -1088,7 +1144,7 @@ const XvTextInput = class {
|
|
|
1088
1144
|
};
|
|
1089
1145
|
XvTextInput.style = XvTextInputV2Style0;
|
|
1090
1146
|
|
|
1091
|
-
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)}";
|
|
1147
|
+
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)}";
|
|
1092
1148
|
const XvTooltipV2Style0 = xvTooltipCss;
|
|
1093
1149
|
|
|
1094
1150
|
const XvTooltip = class {
|
|
@@ -1102,7 +1158,7 @@ const XvTooltip = class {
|
|
|
1102
1158
|
this.position = 'top';
|
|
1103
1159
|
}
|
|
1104
1160
|
render() {
|
|
1105
|
-
return (h(Host, { key: '
|
|
1161
|
+
return (h(Host, { key: 'caeab002ff02c6b43a1eefc52a59f0f0f6d5c75a', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: '9d873d03af5225e4f2d1cc607221044499c59485' }, h("svg", { key: 'b6a29a947bdcb7903e526c430cbbd6486ec496e4', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, 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" })))));
|
|
1106
1162
|
}
|
|
1107
1163
|
};
|
|
1108
1164
|
XvTooltip.style = XvTooltipV2Style0;
|