xv-webcomponents 0.1.18 → 0.1.20

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.
Files changed (138) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +129 -129
  3. package/dist/xv-webcomponents/index-90b82796.js +3971 -0
  4. package/dist/xv-webcomponents/index-90b82796.js.map +1 -0
  5. package/dist/xv-webcomponents/index.esm.js +12 -1
  6. package/dist/xv-webcomponents/index.esm.js.map +1 -1
  7. package/dist/{collection/utils/utils.js → xv-webcomponents/utils-e6dc0550.js} +7 -4
  8. package/dist/xv-webcomponents/utils-e6dc0550.js.map +1 -0
  9. package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js +35 -0
  10. package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js.map +1 -0
  11. package/dist/xv-webcomponents/xv-accordion-v2.entry.js +40 -0
  12. package/dist/xv-webcomponents/xv-accordion-v2.entry.js.map +1 -0
  13. package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js +17 -0
  14. package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js.map +1 -0
  15. package/dist/xv-webcomponents/xv-button-v2.entry.js +33 -0
  16. package/dist/xv-webcomponents/xv-button-v2.entry.js.map +1 -0
  17. package/dist/xv-webcomponents/xv-card-v2.entry.js +18 -0
  18. package/dist/xv-webcomponents/xv-card-v2.entry.js.map +1 -0
  19. package/dist/xv-webcomponents/xv-checkbox-v2.entry.js +99 -0
  20. package/dist/xv-webcomponents/xv-checkbox-v2.entry.js.map +1 -0
  21. package/dist/xv-webcomponents/xv-link-v2.entry.js +26 -0
  22. package/dist/xv-webcomponents/xv-link-v2.entry.js.map +1 -0
  23. package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js +19 -0
  24. package/dist/xv-webcomponents/xv-progress-indicator-v2-item.entry.js.map +1 -0
  25. package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js +39 -0
  26. package/dist/xv-webcomponents/xv-progress-indicator-v2.entry.js.map +1 -0
  27. package/dist/xv-webcomponents/xv-table-v2-col.entry.js +17 -0
  28. package/dist/xv-webcomponents/xv-table-v2-col.entry.js.map +1 -0
  29. package/dist/xv-webcomponents/xv-table-v2-header-row.entry.js +34 -0
  30. package/dist/xv-webcomponents/xv-table-v2-header-row.entry.js.map +1 -0
  31. package/dist/xv-webcomponents/xv-table-v2-row.entry.js +112 -0
  32. package/dist/xv-webcomponents/xv-table-v2-row.entry.js.map +1 -0
  33. package/dist/xv-webcomponents/xv-table-v2.entry.js +114 -0
  34. package/dist/xv-webcomponents/xv-table-v2.entry.js.map +1 -0
  35. package/dist/xv-webcomponents/xv-tag-v2.entry.js +28 -0
  36. package/dist/xv-webcomponents/xv-tag-v2.entry.js.map +1 -0
  37. package/dist/xv-webcomponents/xv-tooltip-v2.entry.js +23 -0
  38. package/dist/xv-webcomponents/xv-tooltip-v2.entry.js.map +1 -0
  39. package/dist/xv-webcomponents/xv-webcomponents.esm.js +48 -1
  40. package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
  41. package/package.json +51 -51
  42. package/dist/cjs/app-globals-3a1e7e63.js +0 -7
  43. package/dist/cjs/app-globals-3a1e7e63.js.map +0 -1
  44. package/dist/cjs/index-782b9733.js +0 -1535
  45. package/dist/cjs/index-782b9733.js.map +0 -1
  46. package/dist/cjs/index.cjs.js +0 -11
  47. package/dist/cjs/index.cjs.js.map +0 -1
  48. package/dist/cjs/loader.cjs.js +0 -17
  49. package/dist/cjs/loader.cjs.js.map +0 -1
  50. package/dist/cjs/utils-c7652b74.js +0 -13
  51. package/dist/cjs/utils-c7652b74.js.map +0 -1
  52. package/dist/cjs/xv-accordion-v2_14.cjs.entry.js +0 -602
  53. package/dist/cjs/xv-accordion-v2_14.cjs.entry.js.map +0 -1
  54. package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js +0 -22
  55. package/dist/cjs/xv-breadcrumbs-v2.cjs.entry.js.map +0 -1
  56. package/dist/cjs/xv-webcomponents.cjs.js +0 -27
  57. package/dist/cjs/xv-webcomponents.cjs.js.map +0 -1
  58. package/dist/collection/collection-manifest.json +0 -26
  59. package/dist/collection/components/xv-accordion/xv-accordion.css +0 -3
  60. package/dist/collection/components/xv-accordion/xv-accordion.js +0 -163
  61. package/dist/collection/components/xv-accordion/xv-accordion.js.map +0 -1
  62. package/dist/collection/components/xv-accordion-item/xv-accordion-item.css +0 -68
  63. package/dist/collection/components/xv-accordion-item/xv-accordion-item.js +0 -132
  64. package/dist/collection/components/xv-accordion-item/xv-accordion-item.js.map +0 -1
  65. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.css +0 -3
  66. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js +0 -19
  67. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js.map +0 -1
  68. package/dist/collection/components/xv-button/xv-button-v2.css +0 -153
  69. package/dist/collection/components/xv-button/xv-button.js +0 -138
  70. package/dist/collection/components/xv-button/xv-button.js.map +0 -1
  71. package/dist/collection/components/xv-card/xv-card.css +0 -63
  72. package/dist/collection/components/xv-card/xv-card.js +0 -122
  73. package/dist/collection/components/xv-card/xv-card.js.map +0 -1
  74. package/dist/collection/components/xv-checkbox/xv-checkbox.css +0 -108
  75. package/dist/collection/components/xv-checkbox/xv-checkbox.js +0 -376
  76. package/dist/collection/components/xv-checkbox/xv-checkbox.js.map +0 -1
  77. package/dist/collection/components/xv-link/xv-link.css +0 -60
  78. package/dist/collection/components/xv-link/xv-link.js +0 -132
  79. package/dist/collection/components/xv-link/xv-link.js.map +0 -1
  80. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.css +0 -7
  81. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +0 -70
  82. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js.map +0 -1
  83. package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.css +0 -66
  84. package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.js +0 -47
  85. package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.js.map +0 -1
  86. package/dist/collection/components/xv-table/defs.js +0 -14
  87. package/dist/collection/components/xv-table/defs.js.map +0 -1
  88. package/dist/collection/components/xv-table/xv-table-col/xv-table-col.css +0 -8
  89. package/dist/collection/components/xv-table/xv-table-col/xv-table-col.js +0 -19
  90. package/dist/collection/components/xv-table/xv-table-col/xv-table-col.js.map +0 -1
  91. package/dist/collection/components/xv-table/xv-table-header-row/xv-table-header-row.css +0 -21
  92. package/dist/collection/components/xv-table/xv-table-header-row/xv-table-header-row.js +0 -122
  93. package/dist/collection/components/xv-table/xv-table-header-row/xv-table-header-row.js.map +0 -1
  94. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.css +0 -53
  95. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js +0 -299
  96. package/dist/collection/components/xv-table/xv-table-row/xv-table-row.js.map +0 -1
  97. package/dist/collection/components/xv-table/xv-table.css +0 -154
  98. package/dist/collection/components/xv-table/xv-table.js +0 -245
  99. package/dist/collection/components/xv-table/xv-table.js.map +0 -1
  100. package/dist/collection/components/xv-tag/xv-tag.css +0 -97
  101. package/dist/collection/components/xv-tag/xv-tag.js +0 -158
  102. package/dist/collection/components/xv-tag/xv-tag.js.map +0 -1
  103. package/dist/collection/components/xv-tooltip/xv-tooltip.css +0 -154
  104. package/dist/collection/components/xv-tooltip/xv-tooltip.js +0 -70
  105. package/dist/collection/components/xv-tooltip/xv-tooltip.js.map +0 -1
  106. package/dist/collection/index.js +0 -11
  107. package/dist/collection/index.js.map +0 -1
  108. package/dist/collection/types/enum.js +0 -9
  109. package/dist/collection/types/enum.js.map +0 -1
  110. package/dist/collection/utils/utils.js.map +0 -1
  111. package/dist/esm/index-83ab73b7.js +0 -1506
  112. package/dist/esm/index-83ab73b7.js.map +0 -1
  113. package/dist/esm/index.js +0 -3
  114. package/dist/esm/index.js.map +0 -1
  115. package/dist/esm/loader.js +0 -13
  116. package/dist/esm/loader.js.map +0 -1
  117. package/dist/esm/utils-9bb6333b.js +0 -10
  118. package/dist/esm/utils-9bb6333b.js.map +0 -1
  119. package/dist/esm/xv-accordion-v2_14.entry.js +0 -585
  120. package/dist/esm/xv-accordion-v2_14.entry.js.map +0 -1
  121. package/dist/esm/xv-breadcrumbs-v2.entry.js +0 -18
  122. package/dist/esm/xv-breadcrumbs-v2.entry.js.map +0 -1
  123. package/dist/esm/xv-webcomponents.js +0 -22
  124. package/dist/esm/xv-webcomponents.js.map +0 -1
  125. package/dist/index.cjs.js +0 -1
  126. package/dist/index.js +0 -1
  127. package/dist/xv-webcomponents/p-5f18d718.entry.js +0 -2
  128. package/dist/xv-webcomponents/p-5f18d718.entry.js.map +0 -1
  129. package/dist/xv-webcomponents/p-840929c5.js +0 -3
  130. package/dist/xv-webcomponents/p-840929c5.js.map +0 -1
  131. package/dist/xv-webcomponents/p-a0b74d3c.js +0 -2
  132. package/dist/xv-webcomponents/p-a0b74d3c.js.map +0 -1
  133. package/dist/xv-webcomponents/p-bfe83d1e.entry.js +0 -2
  134. package/dist/xv-webcomponents/p-bfe83d1e.entry.js.map +0 -1
  135. package/dist/xv-webcomponents/p-e1255160.js +0 -2
  136. package/dist/xv-webcomponents/p-e1255160.js.map +0 -1
  137. /package/dist/{esm → xv-webcomponents}/app-globals-0f993ce5.js +0 -0
  138. /package/dist/{esm → xv-webcomponents}/app-globals-0f993ce5.js.map +0 -0
@@ -1 +0,0 @@
1
- {"file":"utils-c7652b74.js","mappings":";;SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,IAAI,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,IAAI,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;AACjF,CAAC;SAEe,YAAY;IAC1B,OAAO,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,IAC/D,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAChF,CAAC;AACJ;;;;;","names":[],"sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function uidGenerator() {\n return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\n (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\n );\n}\n\n/**\n * Walks through the given DOM collection and runs the given callback.\n * @param a A DOM collection.\n * @param predicate The callback function.\n * @param [thisObject] The context object for the given callback function.\n */\nexport const forEach = (\n a: NodeListOf<Node> | HTMLCollectionOf<Element>,\n predicate: (search: Element, index?: number) => void,\n thisObject?: any\n) => Array.prototype.forEach.call(a, predicate, thisObject);\n"],"version":3}
@@ -1,602 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-782b9733.js');
6
- const utils = require('./utils-c7652b74.js');
7
-
8
- const xvAccordionCss = ":host{display:block}";
9
- const XvAccordionV2Style0 = xvAccordionCss;
10
-
11
- const XvAccordion = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.accordionChange = index.createEvent(this, "accordionChange", 7);
15
- this.multiple = false;
16
- this.xvId = utils.uidGenerator();
17
- this.opened = new Set();
18
- }
19
- async toggleItem(value) {
20
- if (this.opened.has(value)) {
21
- this.opened.delete(value);
22
- }
23
- else {
24
- if (!this.multiple)
25
- this.opened.clear();
26
- this.value = value;
27
- this.opened.add(this.value);
28
- }
29
- this.accordionChange.emit({ opened: this.opened, id: this.xvId });
30
- return { opened: this.opened, id: this.xvId };
31
- }
32
- componentWillLoad() {
33
- if (this.value) {
34
- return this.toggleItem(this.value);
35
- }
36
- }
37
- render() {
38
- return (index.h(index.Host, { key: '66ebac5125b765878f7e21225f60f254bde5e07f', class: "xv-accordion", "data-id": this.xvId }, index.h("slot", { key: 'b5081e54395f14436a7f066fee6e75a48c9b797f' })));
39
- }
40
- };
41
- XvAccordion.style = XvAccordionV2Style0;
42
-
43
- const xvAccordionItemCss = ":host{border-top:1px solid var(--border-subtle-01);display:flex;flex-direction:column;font-family:var(--ff-body, inherit)}:host(.disabled) .label{color:var(--text-disabled)}:host(.disabled) .label:hover{cursor:initial;background-color:transparent}.label{padding:14px 16px;display:inline-flex;align-items:center;column-gap:20px;justify-content:space-between;text-align:left;color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:0.16px;background-color:transparent;transition:background-color 200ms ease-in-out}.label>span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.label:hover{cursor:pointer;background-color:var(--layer-hover-01)}.label:after{content:\"\";border:solid black;border-width:0 2px 2px 0;display:inline-block;padding:4.66px;transition:transform 100ms ease-in-out;transform:rotate(45deg)}.label.opened:after{transform:rotate(-135deg)}.content{padding:0 16px;text-align:left;color:var(--text-primary);font-size:14px;overflow:hidden;max-height:0;transition:max-height 300ms ease-in-out, padding 250ms ease 50ms}.content.opened{padding:14px 16px;max-height:500px}";
44
- const XvAccordionV2ItemStyle0 = xvAccordionItemCss;
45
-
46
- const XvAccordionItem = class {
47
- constructor(hostRef) {
48
- index.registerInstance(this, hostRef);
49
- this.itemToggle = index.createEvent(this, "itemToggle", 7);
50
- this.disabled = false;
51
- this.isOpen = false;
52
- }
53
- handleAccordionChange(event) {
54
- var _a;
55
- const parentAccordionId = (_a = this.el.closest('[data-id]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
56
- if (event.detail.id !== parentAccordionId)
57
- return;
58
- this.isOpen = event.detail.opened.has(this.value);
59
- }
60
- toggle() {
61
- var _a, _b;
62
- if (this.disabled)
63
- return;
64
- this.isOpen = !this.isOpen;
65
- (_b = (_a = this.el.closest('xv-accordion-v2')) === null || _a === void 0 ? void 0 : _a.toggleItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.value);
66
- }
67
- render() {
68
- return (index.h(index.Host, { key: '7d536c27a29b4f1e5a54ffb38c485102a4b22301', class: `${this.disabled ? 'disabled' : ''}` }, index.h("label", { key: 'bd35f139baa3fa9449e4391acb26ceffbeee61c4', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle.bind(this) }, index.h("span", { key: '4b2a948ec962246557b480308e1a7df9712806a1' }, this.label)), index.h("div", { key: 'b88b7c9c9c724b6d6468c59df391c7ec41c99e97', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, index.h("slot", { key: '61cb22aabcf159a31bab0a6cca01dc5478a580f1' }))));
69
- }
70
- get el() { return index.getElement(this); }
71
- };
72
- XvAccordionItem.style = XvAccordionV2ItemStyle0;
73
-
74
- const xvButtonV2Css = "@charset \"UTF-8\";:host{--focus-border-width:2px;--focus-border-style:solid;--button-ghost:tarnsparent;--text-disabled-opacity:0.25;--button-border-radius:3px;--button-border-width:1px;--button-border-style:solid;--button-border-color-accent:#97BF0D;--button-border-color-primary:#273435;--button-border-color-secondary:#D1D1D1;--button-border-color-ghost:tarnsparent;--button-ghost-hover:tarnsparent;--button-ghost-active:rgba(139, 139, 139, 0.5);--button-accent-disabled:#D1D1D1;--button-primary-disabled:#D1D1D1;--button-secondary-disabled:#D1D1D1;--button-tertiary-disabled:tarnsparent;--button-ghost-disabled:tarnsparent}:host button{font-family:inherit;font-size:16px;font-weight:700;padding:0 20px;min-height:40px;line-height:40px;cursor:pointer;box-sizing:border-box;transition:background-color 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, border-width 0.2s ease-in-out, box-shadow 0.2s ease-in-out}:host button.xv-button-block{width:100%}.xv-button{}.xv-button.accent{background-color:var(--button-accent);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);border-radius:var(--button-border-radius)}.xv-button.accent:hover{background-color:var(--button-accent-hover)}.xv-button.accent:active{background-color:var(--button-accent-active);color:var(--text-on-color)}.xv-button.accent:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.accent:disabled{background-color:var(--button-accent-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-accent-disabled)}.xv-button.primary{background-color:var(--button-primary);color:var(--text-on-color);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);border-radius:var(--button-border-radius)}.xv-button.primary:hover{background-color:var(--button-primary-hover)}.xv-button.primary:active{background-color:var(--button-primary-active)}.xv-button.primary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.primary:disabled{background-color:var(--button-primary-disabled);color:var(--text-on-color-disabled);border:var(--button-border-width) var(--button-border-style) var(--button-primary-disabled)}.xv-button.secondary{background-color:var(--button-secondary);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);border-radius:var(--button-border-radius)}.xv-button.secondary:hover{background-color:var(--button-secondary-hover)}.xv-button.secondary:active{background-color:var(--button-secondary-active)}.xv-button.secondary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.secondary:disabled{background-color:var(--button-secondary-disabled);color:var(--text-on-color-disabled)}.xv-button.tertiary{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-tertiary);border-radius:var(--button-border-radius)}.xv-button.tertiary:hover{background-color:var(--button-tertiary-hover)}.xv-button.tertiary:active{background-color:var(--button-tertiary-active)}.xv-button.tertiary:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out}.xv-button.tertiary:disabled{background-color:var(--button-tertiary-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}.xv-button.ghost{background-color:var(--button-ghost);color:var(--text-primary);border:var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);border-radius:var(--button-border-radius)}.xv-button.ghost:hover{background-color:var(--button-ghost-hover)}.xv-button.ghost:active{background-color:var(--button-ghost-active)}.xv-button.ghost:focus{outline:none;border:var(--focus-border-width) var(--focus-border-style) var(--focus);transition:border-color 0.2s ease-in-out}.xv-button.ghost:disabled{background-color:var(--button-ghost-disabled);color:var(--text-disabled);opacity:var(--text-disabled-opacity)}";
75
- const XvButtonV2Style0 = xvButtonV2Css;
76
-
77
- const XvButton = class {
78
- constructor(hostRef) {
79
- index.registerInstance(this, hostRef);
80
- this.buttonClick = index.createEvent(this, "buttonClick", 7);
81
- /** Button label */
82
- this.label = '';
83
- /** Container width Button */
84
- this.block = false;
85
- /** Variant */
86
- this.variant = 'primary';
87
- /** Disabled state */
88
- this.disabled = false;
89
- /** Handle click only if not disabled */
90
- this.handleClick = () => {
91
- if (this.disabled) {
92
- return;
93
- }
94
- this.buttonClick.emit();
95
- };
96
- }
97
- render() {
98
- return (index.h("button", { key: '4b6d2d71bd297a7b1e2a00ba36c8e4380395e696', class: `xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '2934a04fa4aae539014f0a283444903dc9807888', name: "icon-left" }), index.h("slot", { key: '7139fa048b1f6e10f45853f7d1ff3b8cef1b9db6' }, this.label), index.h("slot", { key: 'ff326b3d02d3c4102f85132b890a595fcfec08d4', name: "icon-right" })));
99
- }
100
- };
101
- XvButton.style = XvButtonV2Style0;
102
-
103
- const xvCardCss = ":host{display:flex;flex-direction:column;border-radius:8px;border:1px solid var(--border-subtle-00);background:var(--layer-layer-02);box-shadow:0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);font-family:var(--ff-body, inherit);overflow:visible !important}:host(.xv-card_vertical){width:100% !important}:host(.xv-card_horizontal){flex-direction:row;display:flex;width:max-content}:host(.xv-card_horizontal) .xv-card_media__content,:host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]){min-height:100%;max-height:100%;max-width:160px;min-width:160px}.xv-card_content{padding:16px;display:flex;flex-direction:column;flex:1;text-align:left}.xv-card_media__content,.xv-card_media ::slotted([slot=media]){max-width:100%;min-width:100%;min-height:199px;max-height:199px;object-fit:cover;object-position:center}.xv-card_header__content,.xv-card_header ::slotted([slot=header]){margin:0 0 8px;color:var(--text-primary);font-size:16px;font-style:normal;font-weight:700;line-height:24px;letter-spacing:-0.6px}.xv-card_body{flex:1}.xv-card_body__content,.xv-card_body ::slotted([slot=body]){margin:0 0 8px;color:var(--text-secondary);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:-0.1px}";
104
- const XvCardV2Style0 = xvCardCss;
105
-
106
- const XvCard = class {
107
- constructor(hostRef) {
108
- index.registerInstance(this, hostRef);
109
- this.variant = 'vertical';
110
- }
111
- render() {
112
- return (index.h(index.Host, { key: '347b7aed9ce24e2e048bb4e6d0b07b23f0f60d5b', class: `xv-card xv-card_${this.variant}`, part: this.variant }, index.h("div", { key: '9cd9f38cfe7d93fc271907fc8435033df860c246', class: "xv-card_media" }, index.h("slot", { key: '35e2bae3084a0e7d26e13c0e3116daa9895ea6c1', name: "media" }, this.media && index.h("img", { key: '60d4305b136766e447653cb399f92ae70e3d9430', class: "xv-card_media__content", src: this.media, alt: this.header }))), index.h("div", { key: '3751defc0abf18997dca82ae5b5d6601c6e9f60b', class: "xv-card_content" }, index.h("div", { key: 'cca74475b9e5dba03c82f77851fb503a5323ce3c', class: "xv-card_header" }, index.h("slot", { key: '02c4e3ddfb73bd56ef8f5b44a22bfe710654171a', name: "header" }, this.header && index.h("p", { key: '56998aa4742cc7576a023fcbe3e0892f312805ee', class: "xv-card_header__content" }, this.header))), index.h("div", { key: '86da97df293ff58dbcfe0a2b7bc25c98053ac6a2', class: "xv-card_body" }, index.h("slot", { key: 'ff8d6dc3ef8e437d28f237c415bf43382df85f19', name: "body" }, this.body && index.h("p", { key: '7e8e351ac0fa2100fc7929e81cc380a4a32e7019', class: "xv-card_body__content" }, this.header))), index.h("div", { key: 'dc9824b523f2dbdb4f88dc05ac0e490f9b04f529', class: "xv-card_footer" }, index.h("slot", { key: 'ea4fbffc436ee2ef43f481be7656aad07dfc55ce', name: "footer" }, this.footer)))));
113
- }
114
- };
115
- XvCard.style = XvCardV2Style0;
116
-
117
- const xvCheckboxCss = ":host{--checkbox-size:20px;box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox.disabled{cursor:not-allowed;opacity:0.6}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:2px solid var(--border-subtle-03, #D1D1D1);border-radius:4px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1px solid var(--border-strong-01, #8B8B8B)}.xv-checkbox .label{margin-left:8px;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}";
118
- const XvCheckboxV2Style0 = xvCheckboxCss;
119
-
120
- const XvCheckbox = class {
121
- constructor(hostRef) {
122
- index.registerInstance(this, hostRef);
123
- this.changeEvent = index.createEvent(this, "eventChange", 7);
124
- this.inputEvent = index.createEvent(this, "eventInput", 7);
125
- this.focusEvent = index.createEvent(this, "eventFocus", 7);
126
- this.blurEvent = index.createEvent(this, "eventBlur", 7);
127
- var _a, _b;
128
- /**
129
- * Default checked status
130
- */
131
- this.checked = false;
132
- /**
133
- * Using for forms
134
- */
135
- this.indeterminate = false;
136
- /**
137
- * Disabled status
138
- */
139
- this.disabled = false;
140
- /**
141
- * Input value
142
- */
143
- this.value = 'on';
144
- /**
145
- * The same like default checkbox prop
146
- */
147
- this.required = false;
148
- /**
149
- * Change checkmark icon to minus
150
- */
151
- this.partial = false;
152
- this.hasFocus = false;
153
- this.onInput = (e) => {
154
- const target = e.target;
155
- this.checked = target.checked;
156
- this.inputEvent.emit(this.checked);
157
- };
158
- this.onChange = (e) => {
159
- const target = e.target;
160
- this.checked = target.checked;
161
- this.changeEvent.emit(this.checked);
162
- };
163
- this.onFocus = () => {
164
- this.hasFocus = true;
165
- this.focusEvent.emit();
166
- };
167
- this.onBlur = () => {
168
- this.hasFocus = false;
169
- this.blurEvent.emit();
170
- };
171
- this.internals = ((_b = (_a = this.el).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
172
- }
173
- connectedCallback() {
174
- var _a;
175
- if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
176
- this.internals.setFormValue(this.checked ? this.value : null);
177
- }
178
- }
179
- onCheckedChange(newValue) {
180
- var _a;
181
- if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
182
- this.internals.setFormValue(newValue ? this.value : null);
183
- }
184
- }
185
- render() {
186
- return (index.h(index.Host, { key: '6dc76eae00dd96750977c77db16f31ccfbc15129' }, index.h("label", { key: '6f8f256877217e0e138673083721db9ffd4e21e3', class: { 'xv-checkbox': true, disabled: this.disabled } }, index.h("input", { key: 'ef6abcf5e0904f64dac882fef2d58f7275172443', ref: el => (this.inputEl = el), type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), index.h("span", { key: '04bba1b7f7043f2d5a8ddef812f73a9d2248c1c8', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), index.h("div", { key: '5f550233505fd663d5876bbc4718c8be44bbeabe', class: "label" }, index.h("slot", { key: '861d10aafa6c719a3c712325a7425047fe81bc4a' }, this.label))), index.h("slot", { key: '4e3229b715ec7144816d5119a7f7dc2f6411a86b', name: "info" }), !!this.error && index.h("span", { key: 'c802d1d194b9490283aecadf766f7c066b9bfd90', class: "error" }, this.error)));
187
- }
188
- componentDidLoad() {
189
- if (this.indeterminate) {
190
- this.inputEl.indeterminate = true;
191
- }
192
- }
193
- componentDidUpdate() {
194
- if (this.inputEl) {
195
- this.inputEl.indeterminate = this.indeterminate;
196
- }
197
- }
198
- formResetCallback() {
199
- this.checked = false;
200
- }
201
- formStateRestoreCallback(state) {
202
- this.checked = state === this.value;
203
- }
204
- static get formAssociated() { return true; }
205
- get el() { return index.getElement(this); }
206
- static get watchers() { return {
207
- "checked": ["onCheckedChange"]
208
- }; }
209
- };
210
- XvCheckbox.style = XvCheckboxV2Style0;
211
-
212
- 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{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%}";
213
- const XvLinkV2Style0 = xvLinkCss;
214
-
215
- const XvLink = class {
216
- constructor(hostRef) {
217
- index.registerInstance(this, hostRef);
218
- this.disabled = false;
219
- this.size = 'md';
220
- this.variant = 'inline';
221
- }
222
- preventLinkHandler(e) {
223
- if (!this.disabled)
224
- return;
225
- e.preventDefault();
226
- e.stopPropagation();
227
- }
228
- render() {
229
- return (index.h(index.Host, { key: 'd67fa14d10c47ab7c0e3b006f51b1d376f290715', class: `xv-link_${this.variant}` }, index.h("a", { key: 'abb46cc5fd9f43fa52b0e24b7126fd0cb0d521ca', 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: '55ef3b6ede0521719257218092b58b43dedb3e6e', name: "icon-left" }), index.h("slot", { key: 'bb62dd7d472415956493c97db3df8a61dbd0dbf6' }), index.h("slot", { key: '61f350ff076285dc83c630c4bb7dc5b19526b7c3', name: "icon-right" }))));
230
- }
231
- };
232
- XvLink.style = XvLinkV2Style0;
233
-
234
- const xvProgressIndicatorCss = ":host{display:flex;align-items:flex-start;justify-content:space-between;font-family:var(--ff-body, inherit);overflow-x:auto}";
235
- const XvProgressIndicatorV2Style0 = xvProgressIndicatorCss;
236
-
237
- const XvProgressIndicator = class {
238
- constructor(hostRef) {
239
- index.registerInstance(this, hostRef);
240
- this.progress = 0;
241
- }
242
- // Update 'xv-progress-indicator-item' done status
243
- updateChildItems() {
244
- const items = this.el.children;
245
- const itemsCount = this.el.childElementCount;
246
- const progressPerItem = 100 / itemsCount;
247
- if (!items.length || !itemsCount)
248
- return;
249
- Array.from(items).forEach((item, index) => {
250
- const itemProgress = (index + 1) * progressPerItem;
251
- const done = this.progress >= itemProgress;
252
- item.setAttribute('done', done ? 'true' : 'false');
253
- });
254
- }
255
- // Load initial done status
256
- componentDidLoad() {
257
- this.updateChildItems();
258
- }
259
- render() {
260
- return (index.h(index.Host, { key: '11ddf0d4e355c52e007b1b0705cb5129edf0acad', class: "xv-progress-indicator" }, index.h("slot", { key: 'c90e8f5d63fd15d8d70c8f0e4ff221dc723d5654' })));
261
- }
262
- get el() { return index.getElement(this); }
263
- static get watchers() { return {
264
- "progress": ["updateChildItems"]
265
- }; }
266
- };
267
- XvProgressIndicator.style = XvProgressIndicatorV2Style0;
268
-
269
- const xvProgressIndicatorItemCss = ":host(.xv-progress-indicator-item){display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:10px 16px}:host(.xv-progress-indicator-item):before{width:100%}:host(.xv-progress-indicator-item):before,:host(.xv-progress-indicator-item) .line{content:\"\";z-index:1;display:inline-block;position:absolute;top:0;left:0;right:0;height:2px;color:inherit;background-color:var(--border-subtle-01, grey)}:host(.xv-progress-indicator-item) .line{width:0;color:inherit;transition:width 250ms ease;background-color:var(--background-brand, currentColor)}:host(.xv-progress-indicator-item) .icon{display:flex;align-items:center;justify-content:center;width:22px;height:22px;max-width:22px;max-height:22px;border:2px dashed var(--icon-primary, currentColor);border-radius:50%}:host(.xv-progress-indicator-item) .icon svg{opacity:0;transition:opacity 500ms ease-in-out}:host(.xv-progress-indicator-item) .label{color:var(--text-primary);font-size:14px;font-style:normal;font-weight:400;line-height:18px;letter-spacing:0.16px}:host(.done) .icon{border-color:var(--background-brand, currentColor);color:var(--background-brand, inherit);border-style:solid}:host(.done) .icon svg{opacity:1}:host(.done) .line{width:100% !important;background-color:var(--background-brand, currentColor)}";
270
- const XvProgressIndicatorV2ItemStyle0 = xvProgressIndicatorItemCss;
271
-
272
- const XvProgressIndicatorItem = class {
273
- constructor(hostRef) {
274
- index.registerInstance(this, hostRef);
275
- this.done = false;
276
- }
277
- render() {
278
- return (index.h(index.Host, { key: '601c2068aec197e02e89ca0ba1500abf1c293c7f', class: `xv-progress-indicator-item ${this.done ? 'done' : ''}` }, index.h("span", { key: 'e32b4d65713a001d4dffbc10335e1ea7e3f36e94', class: "line" }), index.h("span", { key: 'a0a87861fc4608287dff58a92ad2fd4b5447dc72', class: "icon" }, index.h("svg", { key: 'b14951a70651ae94e4b4e54f191b7733f45290e0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 448 512", width: 14, height: 14 }, index.h("path", { key: 'c251fc0b0a4bf4f341ed8bbd36f7e03454d1d80d', 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: 'cd0e21308a5884517fecc6d40a88b20463241228', class: "label" }, index.h("slot", { key: '3d5ca8fd5742a83f5aa2fc480b0efeb3ceb46bc0' }))));
279
- }
280
- get el() { return index.getElement(this); }
281
- };
282
- XvProgressIndicatorItem.style = XvProgressIndicatorV2ItemStyle0;
283
-
284
- var TABLE_COLOR_SCHEMA;
285
- (function (TABLE_COLOR_SCHEMA) {
286
- TABLE_COLOR_SCHEMA["DEF"] = "";
287
- TABLE_COLOR_SCHEMA["ZEBRA"] = "zebra";
288
- })(TABLE_COLOR_SCHEMA || (TABLE_COLOR_SCHEMA = {}));
289
- var TABLE_SIZE;
290
- (function (TABLE_SIZE) {
291
- TABLE_SIZE["EXTRA_SMALL"] = "xs";
292
- TABLE_SIZE["SMALL"] = "sm";
293
- TABLE_SIZE["MEDIUM"] = "md";
294
- TABLE_SIZE["LARGE"] = "lg";
295
- TABLE_SIZE["EXTRA_LARGE"] = "xl";
296
- })(TABLE_SIZE || (TABLE_SIZE = {}));
297
-
298
- const xvTableCss = ":host ::slotted(xv-table-v2-header-row[cols=\"1\"]),:host ::slotted(xv-table-v2-row[cols=\"1\"]){--xv-table-cols:1}:host ::slotted(xv-table-v2-header-row[cols=\"2\"]),:host ::slotted(xv-table-v2-row[cols=\"2\"]){--xv-table-cols:2}:host ::slotted(xv-table-v2-header-row[cols=\"3\"]),:host ::slotted(xv-table-v2-row[cols=\"3\"]){--xv-table-cols:3}:host ::slotted(xv-table-v2-header-row[cols=\"4\"]),:host ::slotted(xv-table-v2-row[cols=\"4\"]){--xv-table-cols:4}:host ::slotted(xv-table-v2-header-row[cols=\"5\"]),:host ::slotted(xv-table-v2-row[cols=\"5\"]){--xv-table-cols:5}:host ::slotted(xv-table-v2-header-row[cols=\"6\"]),:host ::slotted(xv-table-v2-row[cols=\"6\"]){--xv-table-cols:6}:host ::slotted(xv-table-v2-header-row[cols=\"7\"]),:host ::slotted(xv-table-v2-row[cols=\"7\"]){--xv-table-cols:7}:host ::slotted(xv-table-v2-header-row[cols=\"8\"]),:host ::slotted(xv-table-v2-row[cols=\"8\"]){--xv-table-cols:8}:host ::slotted(xv-table-v2-header-row[cols=\"9\"]),:host ::slotted(xv-table-v2-row[cols=\"9\"]){--xv-table-cols:9}:host ::slotted(xv-table-v2-header-row[cols=\"10\"]),:host ::slotted(xv-table-v2-row[cols=\"10\"]){--xv-table-cols:10}:host ::slotted(xv-table-v2-header-row[cols=\"11\"]),:host ::slotted(xv-table-v2-row[cols=\"11\"]){--xv-table-cols:11}:host ::slotted(xv-table-v2-header-row[cols=\"12\"]),:host ::slotted(xv-table-v2-row[cols=\"12\"]){--xv-table-cols:12}:host ::slotted(xv-table-v2-header-row[cols=\"13\"]),:host ::slotted(xv-table-v2-row[cols=\"13\"]){--xv-table-cols:13}:host ::slotted(xv-table-v2-header-row[cols=\"14\"]),:host ::slotted(xv-table-v2-row[cols=\"14\"]){--xv-table-cols:14}:host ::slotted(xv-table-v2-header-row[cols=\"15\"]),:host ::slotted(xv-table-v2-row[cols=\"15\"]){--xv-table-cols:15}:host ::slotted(xv-table-v2-header-row[cols=\"16\"]),:host ::slotted(xv-table-v2-row[cols=\"16\"]){--xv-table-cols:16}:host ::slotted(xv-table-v2-header-row[cols=\"17\"]),:host ::slotted(xv-table-v2-row[cols=\"17\"]){--xv-table-cols:17}:host ::slotted(xv-table-v2-header-row[cols=\"18\"]),:host ::slotted(xv-table-v2-row[cols=\"18\"]){--xv-table-cols:18}:host ::slotted(xv-table-v2-header-row[cols=\"19\"]),:host ::slotted(xv-table-v2-row[cols=\"19\"]){--xv-table-cols:19}:host ::slotted(xv-table-v2-header-row[cols=\"20\"]),:host ::slotted(xv-table-v2-row[cols=\"20\"]){--xv-table-cols:20}:host([size=xs]) ::slotted(xv-table-v2-row),:host([size=xs]) ::slotted(xv-table-v2-header-row){padding:2px}:host([size=sm]) ::slotted(xv-table-v2-row),:host([size=sm]) ::slotted(xv-table-v2-header-row){padding:8px}:host([size=md]) ::slotted(xv-table-v2-row),:host([size=md]) ::slotted(xv-table-v2-header-row){padding:16px}:host([size=lg]) ::slotted(xv-table-v2-row),:host([size=lg]) ::slotted(xv-table-v2-header-row){padding:18px}:host([size=xl]) ::slotted(xv-table-v2-row),:host([size=xl]) ::slotted(xv-table-v2-header-row){padding:20px}:host([hoverable]) ::slotted(xv-table-v2-row:hover),:host([hoverable]) ::slotted([highlighted]){background-color:var(--layer-hover-01, #E3E3E3)}:host(xv-table-v2) ::slotted(xv-table-v2-row),:host(xv-table-v2) ::slotted(xv-table-v2-header-row){grid-template-columns:0 repeat(var(--xv-table-cols, 1), 1fr)}:host(xv-table-v2) ::slotted(xv-table-v2-row[collapsed]){padding-top:0;padding-bottom:0}:host(xv-table-v2) .caption{padding:16px 16px 18px}:host(xv-table-v2) .caption_title,:host(xv-table-v2) .caption_description{color:var(--text-primary, #333);margin:0}:host(xv-table-v2) .caption_title{font-family:var(--ff-heading, \"Gill Sans\");font-size:21px}:host(xv-table-v2) .caption_description{font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}:host([expandable]) ::slotted(xv-table-v2-row),:host([expandable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:48px repeat(var(--xv-table-cols, 1), 1fr)}:host([selectable]) ::slotted(xv-table-v2-row),:host([selectable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:50px repeat(var(--xv-table-cols, 1), 1fr)}:host([expandable][selectable]) ::slotted(xv-table-v2-row),:host([expandable][selectable]) ::slotted(xv-table-v2-header-row){position:relative;grid-template-columns:98px repeat(var(--xv-table-cols, 1), 1fr)}";
299
- const XvTableV2Style0 = xvTableCss;
300
-
301
- const XvTable = class {
302
- constructor(hostRef) {
303
- index.registerInstance(this, hostRef);
304
- this.changeSelection = index.createEvent(this, "changeSelection", 7);
305
- /**
306
- * Set current color schema type of enum TABLE_COLOR_SCHEMA
307
- * Possible options 'zebra'
308
- */
309
- this.colorSchema = TABLE_COLOR_SCHEMA.DEF;
310
- /**
311
- * If table is expandable fields
312
- */
313
- this.expandable = false;
314
- /**
315
- * Table size
316
- * enum TABLE_SIZE
317
- */
318
- this.size = TABLE_SIZE.MEDIUM;
319
- /**
320
- * Add checkbox selection to the table
321
- */
322
- this.selectable = false;
323
- this.selectedRows = new Map();
324
- this.handleCheckedChange = (e) => {
325
- const { name, value, checked } = e.detail;
326
- if (checked) {
327
- this.selectedRows.set(name, { name, value });
328
- }
329
- else {
330
- this.selectedRows.delete(name);
331
- }
332
- this.changeSelection.emit(Array.from(this.selectedRows.values()));
333
- };
334
- }
335
- setRowPropsHandler() {
336
- const rows = Array
337
- .from(this.el.childNodes)
338
- .filter((node) => node.nodeType === Node.ELEMENT_NODE &&
339
- ((node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-ROW` || (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`));
340
- let visualIndex = 0;
341
- rows.forEach((node, i) => {
342
- var _a;
343
- const row = node;
344
- const isHeaderRow = (node === null || node === void 0 ? void 0 : node.tagName) === `${this.el.tagName}-HEADER-ROW`;
345
- if (this.selectable) {
346
- let name = row.getAttribute('selection-name');
347
- if (!name) {
348
- name = isHeaderRow ? 'header' : `xv-table-row-${i}`;
349
- row.setAttribute('selection-name', name);
350
- }
351
- if (row.hasAttribute('checked')) {
352
- this.selectedRows.set(name, {
353
- name,
354
- value: (_a = row.getAttribute('value')) !== null && _a !== void 0 ? _a : undefined,
355
- });
356
- }
357
- }
358
- if (isHeaderRow)
359
- return;
360
- switch (this.colorSchema) {
361
- case TABLE_COLOR_SCHEMA.ZEBRA:
362
- const stripe = visualIndex % 2 === 0 ? 'even' : 'odd';
363
- if (row.hasAttribute('expandable') && rows[i + 1]) {
364
- row.setAttribute(stripe, '');
365
- }
366
- else {
367
- visualIndex++;
368
- row.setAttribute(stripe, '');
369
- }
370
- break;
371
- default:
372
- row.removeAttribute('odd');
373
- row.removeAttribute('even');
374
- }
375
- });
376
- }
377
- render() {
378
- return (index.h(index.Host, { key: '5d187689ae04f8cf161616defc092b2690831f98', size: this.size, selectable: this.selectable }, (this.el.title || this.description) && (index.h("div", { key: 'ee66085f185a99c2404d8e398ec356b2e2e5c347', class: "caption" }, this.el.title && index.h("h5", { key: '652bd665af5fac06bbaecd4aed542246c2a5d002', class: "caption_title" }, this.el.title), this.description && index.h("p", { key: '650461f500003c3ce70bbaaf24d4764a5c1904f1', class: "caption_description" }, this.description))), index.h("slot", { key: '7331a48d73167801ccc2d5f8682b62d3656712c3' })));
379
- }
380
- componentWillLoad() {
381
- this.setRowPropsHandler();
382
- this.el.addEventListener('checkedChange', this.handleCheckedChange);
383
- }
384
- disconnectedCallback() {
385
- this.el.removeEventListener('checkedChange', this.handleCheckedChange);
386
- }
387
- get el() { return index.getElement(this); }
388
- static get watchers() { return {
389
- "colorSchema": ["setRowPropsHandler"]
390
- }; }
391
- };
392
- XvTable.style = XvTableV2Style0;
393
-
394
- const xvTableColCss = ":host{display:block;color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;line-height:128.571%;letter-spacing:0.16px}";
395
- const XvTableV2ColStyle0 = xvTableColCss;
396
-
397
- const XvTableCol = class {
398
- constructor(hostRef) {
399
- index.registerInstance(this, hostRef);
400
- }
401
- render() {
402
- return (index.h(index.Host, { key: '7b5fadd70a38fcec9fe9885b0d67531d133a9a17' }, index.h("slot", { key: 'fff4084ecf1148921fc5ab590c8cff21c91f8d89' })));
403
- }
404
- };
405
- XvTableCol.style = XvTableV2ColStyle0;
406
-
407
- const xvTableHeaderRowCss = ":host{display:grid;padding:16px 16px 32px;align-items:center;transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;background:var(--layer-accent-01, #F7F7F7);color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:14px;font-weight:700;line-height:128.571%;letter-spacing:0.16px}:host .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}";
408
- const XvTableV2HeaderRowStyle0 = xvTableHeaderRowCss;
409
-
410
- const XvTableHeaderRow = class {
411
- constructor(hostRef) {
412
- index.registerInstance(this, hostRef);
413
- this.checkedChange = index.createEvent(this, "checkedChange", 7);
414
- /**
415
- * Checkbox row checked
416
- */
417
- this.checked = false;
418
- this.cols = 1;
419
- this.slotChangeHandle = () => {
420
- this.cols = this.el.childElementCount;
421
- };
422
- this.checkboxChange = (e) => {
423
- this.checked = e.detail;
424
- this.checkedChange.emit({
425
- name: this.selectionName,
426
- checked: e.detail
427
- });
428
- };
429
- }
430
- render() {
431
- return (index.h(index.Host, { key: '461bc3ab19dc1e01edf70f94b29cf20092a85607', cols: this.cols }, index.h("div", { key: '960f48a7fb5e9c23922f7dfff28877d420f3385a', class: "left-container" }, this.selectionName !== undefined && (index.h("xv-checkbox-v2", { key: '68308b0c6c9f45e848bca985b0382479032fbcb5', partial: true, name: this.selectionName, checked: this.checked, onEventChange: this.checkboxChange }))), index.h("slot", { key: '3a25f9011769f4fce43b6091de08995c5635381c', onSlotchange: this.slotChangeHandle })));
432
- }
433
- get el() { return index.getElement(this); }
434
- };
435
- XvTableHeaderRow.style = XvTableV2HeaderRowStyle0;
436
-
437
- const xvTableRowCss = ":host(xv-table-v2-row){display:grid;padding:16px;align-items:center;transition:height 0.15s cubic-bezier(0.2, 0, 0.38, 0.9), padding 0.15s ease-in-out, background-color 0.2ms ease-in-out;background:var(--layer-02, #FFF);box-shadow:0 0 0 1px #E3E3E3 inset}:host(xv-table-v2-row) .left-container{height:100%;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}:host(xv-table-v2-row) .expand-btn{outline:none;background-color:transparent;display:block;margin:0 auto;border:solid black;border-width:0 2px 2px 0;padding:5px;transform:rotate(45deg);cursor:pointer;transition:opacity 300ms ease-in-out, transform 200ms ease-in-out}:host(xv-table-v2-row) .expand-btn:active{opacity:0.5}:host(xv-table-v2-row) .expand-btn.expanded{transform:rotate(225deg)}:host([expanded]){block-size:auto}:host([collapsed]){block-size:0;overflow:hidden;padding-top:0;padding-bottom:0}:host([odd]){background-color:var(--layer-selected-01, #E3E3E3)}:host([even]){background-color:#fff}";
438
- const XvTableV2RowStyle0 = xvTableRowCss;
439
-
440
- const XvTableRow = class {
441
- constructor(hostRef) {
442
- index.registerInstance(this, hostRef);
443
- this.checkedChange = index.createEvent(this, "checkedChange", 7);
444
- /**
445
- * Is row will be expandable
446
- * If it's true then the next row will be collapsed
447
- */
448
- this.expandable = false;
449
- /**
450
- * Default state of expandable
451
- */
452
- this.expanded = false;
453
- this.prevRowExpanded = false;
454
- this.cols = 1;
455
- this.checkboxChange = (e) => {
456
- this.checked = e.detail;
457
- this.checkedChange.emit({
458
- name: this.selectionName,
459
- value: this.value,
460
- checked: e.detail
461
- });
462
- };
463
- }
464
- /**
465
- * Called from outside (From expandable row)
466
- */
467
- async setExpandRelation(id, expanded) {
468
- this.expandId = id;
469
- this.prevRowExpanded = !!expanded;
470
- return this.prevRowExpanded;
471
- }
472
- /**
473
- * Called from outside (From expandable row)
474
- * to change then expand or collapse
475
- */
476
- async toggleExpand(id, expanded) {
477
- if (this.expandId !== id)
478
- return;
479
- this.prevRowExpanded = expanded !== undefined ? expanded : !this.prevRowExpanded;
480
- }
481
- /**
482
- * Watch for expandable
483
- * When it's false needs to remove unnecessary properties
484
- */
485
- setExpandableRelationHandle() {
486
- const nextEl = this.el.nextElementSibling;
487
- if (!nextEl || nextEl.tagName !== this.el.tagName)
488
- this.expandable = false;
489
- if (!this.expandable)
490
- return;
491
- if (!this.id)
492
- this.id = this.el.id || utils.uidGenerator();
493
- return nextEl.setExpandRelation(this.id, this.expanded);
494
- }
495
- /**
496
- * When user press on the expand button
497
- */
498
- changeExpandHandle() {
499
- const nextRow = this.el.nextElementSibling;
500
- if (!nextRow || nextRow.tagName !== this.el.tagName)
501
- return;
502
- this.expanded = !this.expanded;
503
- // Call method from new row
504
- nextRow.toggleExpand(this.id, this.expanded);
505
- }
506
- /**
507
- * Highlight the expanded row on hover
508
- */
509
- hoverHandle(active) {
510
- const prevRow = this.el.previousElementSibling;
511
- const nextRow = this.el.nextElementSibling;
512
- if ((nextRow === null || nextRow === void 0 ? void 0 : nextRow.tagName) === this.el.tagName && this.expandable) {
513
- if (active) {
514
- nextRow.setAttribute('highlighted', '');
515
- }
516
- else {
517
- nextRow.removeAttribute('highlighted');
518
- }
519
- }
520
- if ((prevRow === null || prevRow === void 0 ? void 0 : prevRow.tagName) === this.el.tagName && prevRow.hasAttribute('expandable')) {
521
- if (active) {
522
- prevRow.setAttribute('highlighted', '');
523
- }
524
- else {
525
- prevRow.removeAttribute('highlighted');
526
- }
527
- }
528
- }
529
- async componentWillLoad() {
530
- this.id = this.el.id;
531
- this.cols = this.el.childElementCount;
532
- await this.setExpandableRelationHandle();
533
- }
534
- render() {
535
- return (index.h(index.Host, { key: '88df976d496799070ad0011da60871d4984f775e', onMouseEnter: () => this.hoverHandle(true), onMouseLeave: () => this.hoverHandle(false), cols: this.cols, expanded: this.expandId && this.prevRowExpanded, collapsed: this.expandId && !this.prevRowExpanded }, index.h("div", { key: '2a28bfce934d640db4167ce418bec37bddd18494', class: "left-container" }, this.expandable && (index.h("button", { key: '0cf1d6a4472c05677e7d2edb8b2402bf7687fae8', class: `expand-btn ${this.expanded ? 'expanded' : ''}`, onClick: () => this.changeExpandHandle() })), this.selectionName && (index.h("xv-checkbox-v2", { key: 'ea01b82db0a990c0352c3310ceaca1cc55a7d2ca', name: this.selectionName, value: this.value, checked: this.checked, onEventChange: this.checkboxChange }))), index.h("slot", { key: '33be6520fe3e2f7cd352f8ce58ad7286b644d45b' })));
536
- }
537
- get el() { return index.getElement(this); }
538
- static get watchers() { return {
539
- "expandable": ["setExpandableRelationHandle"]
540
- }; }
541
- };
542
- XvTableRow.style = XvTableV2RowStyle0;
543
-
544
- const xvTagCss = "@charset \"UTF-8\";:host{display:inline-flex;align-items:center;justify-content:space-between;border-radius:1000px;background-color:var(--background);color:var(--text-primary);font-family:var(--ff-body, inherit)}:host .xv-tag_content{padding-left:8px;padding-right:8px;color:inherit;font-family:var(--ff-body);font-style:normal;font-weight:400;line-height:16px;letter-spacing:0.32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .xv-tag_close{box-sizing:border-box;text-decoration:none;border:none;background-color:inherit;outline:none;border-spacing:0;list-style:none outside none;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:62px;width:15px;height:15px;text-align:left;color:inherit;text-indent:0;transition:opacity 300ms ease-in-out, filter 300ms ease-in-out}:host .xv-tag_close:hover{cursor:pointer;filter:brightness(80%)}:host .xv-tag_close:active{opacity:0.7}:host .xv-tag_close:focus{outline:1px solid currentColor}:host .xv-tag_close:after{overflow:hidden;width:inherit;height:inherit;color:inherit;font-size:16px;display:inline-flex;align-items:center;justify-content:center;content:\"×\"}:host(.sm){font-size:var(--fz-sm)}:host(.md){font-size:var(--fz-md)}:host(.md) .xv-tag_content{line-height:24px}:host(.md) .xv-tag_close{height:24px;width:24px}:host(.lg){font-size:var(--fz-lg)}:host(.lg) .xv-tag_content{line-height:26px}:host(.lg) .xv-tag_close{height:26px;width:26px}:host(.disabled){pointer-events:none;background-color:var(--layer-01);color:var(--text-disabled)}";
545
- const XvTagV2Style0 = xvTagCss;
546
-
547
- const XvTag = class {
548
- constructor(hostRef) {
549
- index.registerInstance(this, hostRef);
550
- this.closeClick = index.createEvent(this, "closeClick", 7);
551
- this.size = 'md';
552
- this.color = '';
553
- this.bg = '';
554
- this.disabled = false;
555
- this.closeable = false;
556
- }
557
- closeHandler(e) {
558
- if (this.disabled)
559
- return;
560
- this.closeClick.emit(e);
561
- }
562
- render() {
563
- return (index.h(index.Host, { key: '3164ae035733d790ba1fb02040dd8ba5430c960a', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, index.h("div", { key: '1c540ff9be6a45d89d8a2175bf2603640e43b478', class: "xv-tag_content" }, index.h("slot", { key: '2d893f03cc168828c932c4995ba2bbb6a649897b' })), this.closeable && (index.h("button", { key: '459f1f667f3b207fa6f5b24af82e2b5f6470db0d', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
564
- }
565
- };
566
- XvTag.style = XvTagV2Style0;
567
-
568
- 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)}";
569
- const XvTooltipV2Style0 = xvTooltipCss;
570
-
571
- const XvTooltip = class {
572
- constructor(hostRef) {
573
- index.registerInstance(this, hostRef);
574
- /**
575
- * Tooltip and arrow position related to element
576
- * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.
577
- * By default, "top"
578
- */
579
- this.position = 'top';
580
- }
581
- render() {
582
- return (index.h(index.Host, { key: '476077c0607c160c2374a48f00c5ddabd199da03', tooltip: this.message, class: `xv-tooltip_${this.position}` }, index.h("slot", { key: '9ebaf660c304374fd7eb1802a5e145a7856c7b70' }, index.h("svg", { key: '196a46d3bf15df204853bc092361538dafcbf9f8', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, index.h("path", { key: '042422978eb1dca37c64df75b076fc25f4f0dd87', 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" })))));
583
- }
584
- };
585
- XvTooltip.style = XvTooltipV2Style0;
586
-
587
- exports.xv_accordion_v2 = XvAccordion;
588
- exports.xv_accordion_v2_item = XvAccordionItem;
589
- exports.xv_button_v2 = XvButton;
590
- exports.xv_card_v2 = XvCard;
591
- exports.xv_checkbox_v2 = XvCheckbox;
592
- exports.xv_link_v2 = XvLink;
593
- exports.xv_progress_indicator_v2 = XvProgressIndicator;
594
- exports.xv_progress_indicator_v2_item = XvProgressIndicatorItem;
595
- exports.xv_table_v2 = XvTable;
596
- exports.xv_table_v2_col = XvTableCol;
597
- exports.xv_table_v2_header_row = XvTableHeaderRow;
598
- exports.xv_table_v2_row = XvTableRow;
599
- exports.xv_tag_v2 = XvTag;
600
- exports.xv_tooltip_v2 = XvTooltip;
601
-
602
- //# sourceMappingURL=xv-accordion-v2_14.cjs.entry.js.map