@genexus/genexus-ide-ui 0.0.41 → 0.0.43

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 (88) hide show
  1. package/dist/cjs/ch-icon.cjs.entry.js +116 -0
  2. package/dist/cjs/{form-validation-f8e709d0.js → common-facb7f18.js} +0 -19
  3. package/dist/cjs/constants-e63c0ad9.js +10 -0
  4. package/dist/cjs/form-validation-b7fb4ca8.js +21 -0
  5. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  6. package/dist/cjs/gx-ide-create-kb-from-server.cjs.entry.js +4 -3
  7. package/dist/cjs/{gxg-date-picker.cjs.entry.js → gx-ide-entity-selector_2.cjs.entry.js} +81 -0
  8. package/dist/cjs/gx-ide-new-environment.cjs.entry.js +3 -2
  9. package/dist/cjs/gx-ide-new-kb.cjs.entry.js +6 -5
  10. package/dist/cjs/gx-ide-object-selector.cjs.entry.js +30 -24
  11. package/dist/cjs/gx-ide-ww-images.cjs.entry.js +230 -0
  12. package/dist/cjs/{gxg-button.cjs.entry.js → gxg-button_2.cjs.entry.js} +61 -0
  13. package/dist/cjs/gxg-combo-box_2.cjs.entry.js +705 -0
  14. package/dist/cjs/{gxg-combo-box_6.cjs.entry.js → gxg-tab_4.cjs.entry.js} +1 -698
  15. package/dist/cjs/loader.cjs.js +1 -1
  16. package/dist/collection/collection-manifest.json +1 -0
  17. package/dist/collection/common/constants.js +6 -0
  18. package/dist/collection/components/object-selector/gx-ide-assets/object-selector/langs/object-selector.lang.en.json +1 -1
  19. package/dist/collection/components/object-selector/object-selector.js +33 -26
  20. package/dist/collection/components/ww-images/gx-ide-assets/ww-images/langs/ww-images.lang.en.json +47 -0
  21. package/dist/collection/components/ww-images/gx-ide-assets/ww-images/langs/ww-images.lang.ja.json +3 -0
  22. package/dist/collection/components/ww-images/gx-ide-assets/ww-images/langs/ww-images.lang.zh.json +3 -0
  23. package/dist/collection/components/ww-images/ww-images.css +229 -0
  24. package/dist/collection/components/ww-images/ww-images.js +674 -0
  25. package/dist/collection/pages/assets/common.js +20 -0
  26. package/dist/components/common.js +46 -0
  27. package/dist/components/constants.js +8 -0
  28. package/dist/components/form-validation.js +1 -46
  29. package/dist/components/gx-ide-create-kb-from-server.js +2 -1
  30. package/dist/components/gx-ide-new-environment.js +2 -1
  31. package/dist/components/gx-ide-new-kb.js +2 -1
  32. package/dist/components/gx-ide-object-selector.js +30 -24
  33. package/dist/components/gx-ide-ww-images.d.ts +11 -0
  34. package/dist/components/gx-ide-ww-images.js +422 -0
  35. package/dist/components/index.d.ts +1 -0
  36. package/dist/components/index.js +1 -0
  37. package/dist/esm/ch-icon.entry.js +112 -0
  38. package/dist/esm/{form-validation-cdb16431.js → common-a3df0966.js} +1 -19
  39. package/dist/esm/constants-7882d1a8.js +8 -0
  40. package/dist/esm/form-validation-09bd4504.js +19 -0
  41. package/dist/esm/genexus-ide-ui.js +1 -1
  42. package/dist/esm/gx-ide-create-kb-from-server.entry.js +2 -1
  43. package/dist/esm/{gxg-date-picker.entry.js → gx-ide-entity-selector_2.entry.js} +81 -1
  44. package/dist/esm/gx-ide-new-environment.entry.js +2 -1
  45. package/dist/esm/gx-ide-new-kb.entry.js +2 -1
  46. package/dist/esm/gx-ide-object-selector.entry.js +30 -24
  47. package/dist/esm/gx-ide-ww-images.entry.js +226 -0
  48. package/dist/esm/{gxg-button.entry.js → gxg-button_2.entry.js} +62 -2
  49. package/dist/esm/gxg-combo-box_2.entry.js +700 -0
  50. package/dist/esm/{gxg-combo-box_6.entry.js → gxg-tab_4.entry.js} +3 -698
  51. package/dist/esm/loader.js +1 -1
  52. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  53. package/dist/genexus-ide-ui/gx-ide-assets/object-selector/langs/object-selector.lang.en.json +1 -1
  54. package/dist/genexus-ide-ui/gx-ide-assets/ww-images/langs/ww-images.lang.en.json +47 -0
  55. package/dist/genexus-ide-ui/gx-ide-assets/ww-images/langs/ww-images.lang.ja.json +3 -0
  56. package/dist/genexus-ide-ui/gx-ide-assets/ww-images/langs/ww-images.lang.zh.json +3 -0
  57. package/dist/genexus-ide-ui/p-07e89cdd.entry.js +1 -0
  58. package/dist/genexus-ide-ui/p-35fc1102.entry.js +1 -0
  59. package/dist/genexus-ide-ui/p-44964acf.js +1 -0
  60. package/dist/genexus-ide-ui/p-4b7f7425.entry.js +1 -0
  61. package/dist/genexus-ide-ui/p-4d39c34a.entry.js +1 -0
  62. package/dist/genexus-ide-ui/p-5ad757f4.entry.js +1 -0
  63. package/dist/genexus-ide-ui/p-6010dc9d.js +1 -0
  64. package/dist/genexus-ide-ui/p-7a83018d.entry.js +1 -0
  65. package/dist/genexus-ide-ui/p-7a90def4.entry.js +1 -0
  66. package/dist/genexus-ide-ui/p-8bf7f0e1.entry.js +1 -0
  67. package/dist/genexus-ide-ui/p-a89c699c.entry.js +1 -0
  68. package/dist/genexus-ide-ui/p-daf4eb69.js +1 -0
  69. package/dist/genexus-ide-ui/p-fcdcb919.entry.js +1 -0
  70. package/dist/types/common/constants.d.ts +6 -0
  71. package/dist/types/components/object-selector/object-selector.d.ts +5 -7
  72. package/dist/types/components/ww-images/ww-images.d.ts +190 -0
  73. package/dist/types/components.d.ts +184 -2
  74. package/package.json +1 -1
  75. package/dist/cjs/ch-icon_2.cjs.entry.js +0 -177
  76. package/dist/cjs/gx-ide-entity-selector.cjs.entry.js +0 -87
  77. package/dist/esm/ch-icon_2.entry.js +0 -172
  78. package/dist/esm/gx-ide-entity-selector.entry.js +0 -83
  79. package/dist/genexus-ide-ui/p-2ebd392f.entry.js +0 -1
  80. package/dist/genexus-ide-ui/p-34721f1c.entry.js +0 -1
  81. package/dist/genexus-ide-ui/p-5c560dd0.entry.js +0 -1
  82. package/dist/genexus-ide-ui/p-a708db45.entry.js +0 -1
  83. package/dist/genexus-ide-ui/p-c304345f.entry.js +0 -1
  84. package/dist/genexus-ide-ui/p-c38c6957.entry.js +0 -1
  85. package/dist/genexus-ide-ui/p-cf41f154.entry.js +0 -1
  86. package/dist/genexus-ide-ui/p-db945a17.js +0 -1
  87. package/dist/genexus-ide-ui/p-e1fea866.entry.js +0 -1
  88. package/dist/genexus-ide-ui/p-f9731b7c.entry.js +0 -1
@@ -1,701 +1,6 @@
1
- import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0da01575.js';
2
- import { a as formMessageLogic } from './form-5e68671c.js';
3
- import { r as repositionScroll } from './reposition-scroll-3478b46f.js';
4
- import { K as KeyboardKeys } from './types-02481dff.js';
5
- import { e as exportParts } from './export-parts-7f208d57.js';
1
+ import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-0da01575.js';
6
2
  import { s as state } from './store-c2650ca5.js';
7
- import { c as commonClassesNames } from './classesNames-6cd8fadb.js';
8
-
9
- function mutationObserverRemoved(target, ref) {
10
- const observer = new MutationObserver((mutationsList) => {
11
- for (const mutation of mutationsList) {
12
- if (mutation.type === "childList") {
13
- const removedNodesArray = Array.from(mutation.removedNodes);
14
- for (const removedNode of removedNodesArray) {
15
- if (removedNode.nodeType === Node.ELEMENT_NODE) {
16
- ref.removedItem = removedNode;
17
- }
18
- }
19
- }
20
- }
21
- });
22
- observer.observe(target, { childList: true });
23
- return observer; // Return the observer instance if needed
24
- }
25
-
26
- const comboBoxCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{font-family:var(--font-family-primary);display:block}:host gxg-form-text::part(input){padding-inline-end:var(--spacing-comp-05)}:host gxg-form-text.clear-icon::part(input){padding-inline-end:calc(var(--spacing-comp-05) * 2)}:host .main-container{width:100%;position:relative;}:host .main-container .label{font-size:var(--font-size-sm);margin-bottom:var(--spacing-lay-xs)}:host .main-container .search-container{flex:1;position:relative}:host .main-container .search-container .buttons-wrapper{position:absolute;top:2px;height:calc(100% - 4px);display:flex;align-items:center;padding-inline-start:var(--spacing-comp-01);inset-inline-end:2px}:host .main-container .search-container .buttons-wrapper .button-icon{height:20px;width:20px}:host .main-container .items-container{border:var(--border-width-sm) solid var(--gxg-border-color--regular);border-radius:var(--border-radius-md);border-top-left-radius:0;border-top-right-radius:0;border-top-width:0;overflow-y:auto;overscroll-behavior:contain;background-color:var(--color-background);position:fixed;width:inherit;box-sizing:border-box;z-index:999;display:none;}:host .main-container .items-container::-webkit-scrollbar{width:6px;height:6px}:host .main-container .items-container::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}:host .main-container .items-container::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host .main-container .items-container--show{display:block}:host .main-container .items-container--no-match{display:none}:host .main-container .items-container .no-ocurrences-found{font-family:var(--font-family-primary);font-size:var(--font-size-sm);color:var(--color-on-background);padding:var(--spacing-comp-01);background-color:var(--color-background)}:host .main-container .items-container .no-ocurrences-found span{display:block;color:var(--gray-04)}:host .main-container .items-container.exact-match{overflow-y:hidden}:host .main-container .items-container--above{transform:translateY(calc(-100% - 24px));border-top-width:1px;border-bottom-width:0;border-top-left-radius:var(--border-radius-md);border-top-right-radius:var(--border-radius-md);border-bottom-right-radius:0;border-bottom-left-radius:0}:host .search-and-items-container{flex:1}:host([label-position=start]) .main-container{display:flex;flex-direction:row}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}:host(.large) .main-container .label{display:flex;font-size:var(--font-size-lg);margin-bottom:var(--spacing-lay-xs);line-height:1.455em}:host(.large) .main-container .items-container .no-ocurrences-found{font-size:var(--font-size-lg)}";
27
-
28
- const GxgComboBox = class {
29
- constructor(hostRef) {
30
- registerInstance(this, hostRef);
31
- this.valueChanged = createEvent(this, "valueChanged", 7);
32
- this.opened = createEvent(this, "opened", 7);
33
- this.closed = createEvent(this, "closed", 7);
34
- this.toggled = createEvent(this, "toggled", 7);
35
- this.parts = {
36
- input: "input",
37
- clearButton: "clear-button",
38
- toggleButton: "toggle-button",
39
- };
40
- this.setInitialValueTimes = 0;
41
- /**
42
- * The presence of this attribute makes the input disabled
43
- */
44
- this.disabled = false;
45
- /**
46
- * The combo label
47
- */
48
- this.label = undefined;
49
- /**
50
- * The input label
51
- */
52
- this.labelPosition = "above";
53
- /**
54
- * The combo min-width
55
- */
56
- this.minWidth = "0";
57
- /**
58
- * The combo max-width
59
- */
60
- this.maxWidth = "100%";
61
- /**
62
- * The combo list max height
63
- */
64
- this.listMaxHeight = "244px";
65
- /**
66
- * The combo placeholder
67
- */
68
- this.placeholder = "Search item";
69
- /**
70
- * The presence of this attribute disables the filter
71
- */
72
- this.disableFilter = false;
73
- /**
74
- * The presence of this attribute disables the clear button
75
- */
76
- this.disableClear = false;
77
- /**
78
- * If this attribute is present, "value" will only return something if a comboItem is selected, otherwise it will return undefined.
79
- * if this attribute is not present, "value" will return the value of the actual comboItem, or whatever text the comboItem has.
80
- */
81
- this.strict = false;
82
- /**
83
- * The presence of this attribute with make the filter search for values with case sensitive distinction
84
- */
85
- this.caseSensitive = false;
86
- /**
87
- * The container 'items container' position
88
- */
89
- this.listPosition = "below";
90
- /**
91
- * Centers the label
92
- */
93
- this.centerLabel = false;
94
- /*VALIDATION*/
95
- /**
96
- * The presence of this attribute makes the commbo required
97
- */
98
- this.required = false;
99
- /**
100
- * The validation status
101
- *
102
- */
103
- this.validationStatus = "indeterminate";
104
- /**
105
- * If true, it will position the cursor at the end when the input is focused.
106
- */
107
- this.cursorEnd = false;
108
- this.userTyped = false;
109
- this.formMessageLogic = formMessageLogic;
110
- this.inputTextValue = "";
111
- this.listIsOpen = false;
112
- this.inputTextIcon = undefined;
113
- this.inputTextIconPosition = null;
114
- this.noMatch = false;
115
- this.lastAllowedValue = undefined;
116
- this.slottedContent = null;
117
- this.selectionProgramatic = true;
118
- this.myObserver = null;
119
- this.detectClickOutsideCombo = this.detectClickOutsideComboFunc.bind(this);
120
- this.detectMouseScroll = this.detectMouseScrollFunc.bind(this);
121
- this.attachExportParts = () => {
122
- const part = this.el.getAttribute("part");
123
- const exportPartsResult = exportParts(part, this.parts);
124
- exportPartsResult.length && (this.exportparts = exportPartsResult);
125
- };
126
- this.mutationRemoveObserver = () => {
127
- this._mo = mutationObserverRemoved(this.el, this);
128
- };
129
- /*********************************
130
- HANDLERS
131
- *********************************/
132
- this.inputHandler = (e) => {
133
- this.userTyped = true;
134
- const value = this.sanitizeString(e.detail);
135
- const filteredItems = this.filterList(value);
136
- if (!this.strict) {
137
- this.value = value;
138
- }
139
- else if (filteredItems.length === 1) {
140
- /*on strict mode, only set value if there is an exact match*/
141
- this.value = filteredItems[0].value;
142
- }
143
- };
144
- this.keyDownHandler = (e) => {
145
- if (e.code === KeyboardKeys.ARROW_DOWN || e.code === KeyboardKeys.ARROW_UP) {
146
- e.preventDefault();
147
- }
148
- let newItem;
149
- if (e.code === KeyboardKeys.ARROW_DOWN) {
150
- newItem = this.getNewItem("next");
151
- (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
152
- repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_DOWN);
153
- e.altKey && this.showList();
154
- }
155
- else if (e.code === KeyboardKeys.ARROW_UP) {
156
- newItem = this.getNewItem("prev");
157
- (newItem === null || newItem === void 0 ? void 0 : newItem.value) && (this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value);
158
- repositionScroll(this.itemsContainer, this.selectedItem, KeyboardKeys.ARROW_UP);
159
- }
160
- else if (e.code === KeyboardKeys.ENTER) {
161
- this.hideList();
162
- this.showAllItems();
163
- }
164
- else if (e.code === KeyboardKeys.SPACE) {
165
- this.showList();
166
- }
167
- else if (e.code === KeyboardKeys.ESCAPE) {
168
- this.showAllItems();
169
- this.hideList();
170
- }
171
- else if (e.code === KeyboardKeys.TAB && this.showList) {
172
- this.hideList();
173
- }
174
- };
175
- this.handleValueChangeFormText = (e) => {
176
- this.value = e.detail;
177
- };
178
- /*********************************
179
- PRIVATE METHODS
180
- *********************************/
181
- this.filterList = (text) => {
182
- text = this.sanitizeString(text);
183
- !this.caseSensitive && (text = text.toLowerCase());
184
- const enabledItems = this.getEnabledItems();
185
- const filteredItems = [];
186
- if (enabledItems.length) {
187
- enabledItems.forEach((item) => {
188
- const itemText = !this.caseSensitive
189
- ? item.textContent.toLocaleLowerCase()
190
- : item.textContent;
191
- if (!item.disabled && itemText.includes(text)) {
192
- filteredItems.push(item);
193
- item.hidden = false;
194
- }
195
- else {
196
- item.hidden = true;
197
- }
198
- });
199
- }
200
- if (filteredItems.length >= 1) {
201
- this.showList();
202
- }
203
- else {
204
- this.hideList();
205
- }
206
- return filteredItems;
207
- };
208
- this.showAllItems = () => {
209
- const enabledItems = this.getEnabledItems();
210
- enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
211
- (item === null || item === void 0 ? void 0 : item.hidden) && (item.hidden = false);
212
- });
213
- };
214
- this.cleanup = () => {
215
- this.myObserver.unobserve(document.body);
216
- document.removeEventListener("click", this.detectClickOutsideCombo, true);
217
- document.removeEventListener("scroll", this.detectMouseScroll, true);
218
- this._mo.disconnect();
219
- };
220
- this.setup = () => {
221
- this.setIndexes();
222
- this.setInitialValue();
223
- };
224
- this.setIndexes = () => {
225
- const allItems = this.getAllItems();
226
- allItems.forEach((item, i) => {
227
- item.index = i;
228
- });
229
- };
230
- this.getEnabledItems = () => {
231
- const enabledItems = [];
232
- const allItems = this.getAllItems();
233
- allItems.forEach((item) => {
234
- !item.disabled && enabledItems.push(item);
235
- });
236
- return enabledItems;
237
- };
238
- this.getFilteredItems = () => {
239
- const enabledItems = this.getEnabledItems();
240
- const filteredItems = [];
241
- enabledItems.forEach((item) => {
242
- !item.hidden && filteredItems.push(item);
243
- });
244
- return filteredItems;
245
- };
246
- this.getAllItems = () => {
247
- const allItems = [];
248
- const allItemsNodeList = this.el.querySelectorAll("gxg-combo-box-item");
249
- allItemsNodeList.forEach((item) => {
250
- allItems.push(item);
251
- });
252
- return allItems;
253
- };
254
- this.getItemByValue = (value) => {
255
- let item;
256
- if (value) {
257
- const enabledItems = this.getEnabledItems();
258
- item = enabledItems.find((item) => {
259
- return !item.disabled && (item === null || item === void 0 ? void 0 : item.value) && item.value === value;
260
- });
261
- }
262
- return item;
263
- };
264
- this.clearSelectedItem = () => {
265
- const enabledItems = this.getEnabledItems();
266
- enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.forEach((item) => {
267
- item.selected && (item.selected = false);
268
- });
269
- this.selectedItem = undefined;
270
- this.clearIcon();
271
- };
272
- this.getValueByText = (text) => {
273
- !this.caseSensitive && (text = text.toLowerCase());
274
- const enabledItems = this.getEnabledItems();
275
- const item = enabledItems === null || enabledItems === void 0 ? void 0 : enabledItems.find((item) => {
276
- const itemText = !this.caseSensitive
277
- ? item.textContent.toLocaleLowerCase()
278
- : item.textContent;
279
- return !item.disabled && itemText === text;
280
- });
281
- return item === null || item === void 0 ? void 0 : item.value;
282
- };
283
- this.getNewItem = (direction) => {
284
- const filteredItems = this.getFilteredItems();
285
- const indexInFiltered = filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.findIndex((item) => {
286
- return item === this.selectedItem;
287
- });
288
- if (direction === "next") {
289
- if (indexInFiltered === -1) {
290
- /*no selectedItem at the time*/
291
- return filteredItems[0];
292
- }
293
- return filteredItems[indexInFiltered + 1];
294
- }
295
- else if (direction === "prev") {
296
- if (indexInFiltered !== -1) {
297
- return filteredItems[indexInFiltered - 1];
298
- }
299
- }
300
- };
301
- this.setSelectedItem = (item) => {
302
- if (item) {
303
- this.selectedItem && (this.selectedItem.selected = false);
304
- item.selected = true;
305
- this.selectedItem = item;
306
- return true;
307
- }
308
- return false;
309
- };
310
- this.sanitizeString = (value) => {
311
- if (typeof value === "string") {
312
- return value.replace(/\s+/g, " ").trim();
313
- }
314
- return value;
315
- };
316
- this.setInitialValue = () => {
317
- this.setInitialValueTimes++;
318
- const firstItem = this.getEnabledItems()[0];
319
- if (!this.value || this.removedItem !== undefined) {
320
- if (firstItem) {
321
- this.value = firstItem.value;
322
- this.text = firstItem.innerText;
323
- }
324
- else {
325
- if (this.strict) {
326
- this.value = undefined;
327
- }
328
- }
329
- }
330
- else {
331
- const item = this.getItemByValue(this.value);
332
- if (item) {
333
- this.text = item.innerText;
334
- }
335
- else {
336
- if (this.strict) {
337
- this.value = undefined;
338
- }
339
- else {
340
- this.text = this.value.toString();
341
- }
342
- }
343
- }
344
- };
345
- this.toggleListButtonClickHandler = () => {
346
- if (!this.disabled) {
347
- this.showAllItems();
348
- this.toggleList();
349
- this.focus();
350
- }
351
- };
352
- this.inputTextClickHandler = () => {
353
- if (!this.disabled) {
354
- this.disableFilter && this.toggleList();
355
- }
356
- };
357
- this.toggleList = () => {
358
- if (!this.disabled) {
359
- this.listIsOpen = !this.listIsOpen;
360
- }
361
- };
362
- this.showList = () => {
363
- if (!this.disabled) {
364
- this.listIsOpen = true;
365
- }
366
- };
367
- this.hideList = () => {
368
- if (!this.disabled) {
369
- this.listIsOpen = false;
370
- }
371
- };
372
- this.clearIcon = () => {
373
- if (!this.disabled) {
374
- this.inputTextIcon = null;
375
- this.inputTextIconPosition = null;
376
- }
377
- };
378
- }
379
- disabledHandler(newValue) {
380
- if (newValue === true) {
381
- this.valueBeforeDisabled = this.value;
382
- this.textBeforeDisabled = this.text;
383
- this.iconBeforeDisabled = this.inputTextIcon;
384
- this.iconPositionBeforeDisabled = this.inputTextIconPosition;
385
- this.value = null;
386
- this.inputTextIcon = null;
387
- this.inputTextIconPosition = null;
388
- }
389
- else {
390
- this.value = this.valueBeforeDisabled;
391
- this.text = this.textBeforeDisabled;
392
- this.inputTextIcon = this.iconBeforeDisabled;
393
- this.inputTextIconPosition = this.iconPositionBeforeDisabled;
394
- }
395
- }
396
- componentDidUpdate() {
397
- const itemsContainerIsOverflowing = this.itemsContainerBottomOverflows();
398
- itemsContainerIsOverflowing
399
- ? (this.listPosition = "above")
400
- : (this.listPosition = "below");
401
- }
402
- componentWillLoad() {
403
- this.setup();
404
- this.attachExportParts();
405
- this.mutationRemoveObserver();
406
- }
407
- componentDidLoad() {
408
- this.resizeObserver();
409
- }
410
- disconnectedCallback() {
411
- this.cleanup();
412
- }
413
- /*********************************
414
- METHODS
415
- *********************************/
416
- async open() {
417
- this.listIsOpen = true;
418
- }
419
- async close() {
420
- this.listIsOpen = false;
421
- }
422
- async getValueByIndex(index) {
423
- const enabledItems = this.getEnabledItems();
424
- const foundItem = enabledItems.filter((item) => item.index === index)[0];
425
- return foundItem === null || foundItem === void 0 ? void 0 : foundItem.value;
426
- }
427
- async setValueByIndex(index) {
428
- const enabledItems = this.getEnabledItems();
429
- const foundItem = enabledItems.filter((item) => item.index === index)[0];
430
- if (foundItem && foundItem.value) {
431
- this.value = foundItem.value;
432
- return true;
433
- }
434
- return false;
435
- }
436
- async selectInputText() {
437
- this.inputText.selectInputText();
438
- }
439
- /*********************************
440
- LISTEN
441
- *********************************/
442
- itemSelectedHandler(event) {
443
- this.value = event.detail.value;
444
- this.inputText.focus();
445
- }
446
- itemDidLoadHandler() {
447
- this.setIndexes();
448
- this.setInitialValue();
449
- }
450
- keyDownComboItemHandler(event) {
451
- event.stopPropagation();
452
- if (event.detail === "ArrowUp") {
453
- this.inputText.focus();
454
- }
455
- else if (event.detail === "Tab" || event.detail === "Escape") {
456
- this.listIsOpen = false;
457
- this.inputText.focus();
458
- }
459
- }
460
- /*********************************
461
- WATCH
462
- *********************************/
463
- onValueChanged(newValue) {
464
- if (this.setInitialValueTimes > 1) {
465
- this.valueChanged.emit(newValue);
466
- }
467
- this.clearSelectedItem();
468
- let value;
469
- let newItem = undefined;
470
- if (this.userTyped) {
471
- value = this.getValueByText(newValue);
472
- }
473
- else {
474
- !this.listIsOpen && this.showAllItems();
475
- value = newValue;
476
- }
477
- newItem = this.getItemByValue(value);
478
- if (newItem) {
479
- this.setSelectedItem(newItem);
480
- this.setIcon(newItem.icon);
481
- (newItem === null || newItem === void 0 ? void 0 : newItem.textContent) && (this.text = newItem.textContent);
482
- }
483
- else {
484
- //this.setIcon(undefined);
485
- if (this.strict) {
486
- this.text = undefined;
487
- this.value = undefined;
488
- }
489
- else {
490
- this.text = newValue;
491
- }
492
- }
493
- this.userTyped = false;
494
- }
495
- listIsOpenHandler(newValue) {
496
- let isOpen = false;
497
- if (newValue) {
498
- //list is open
499
- isOpen = true;
500
- document.addEventListener("click", this.detectClickOutsideCombo, true);
501
- document.addEventListener("scroll", this.detectMouseScroll, true);
502
- this.opened.emit();
503
- //Reposition .items-container, since it has fixed position
504
- this.repositionItemsContainer();
505
- }
506
- else {
507
- //list is closed
508
- document.removeEventListener("click", this.detectClickOutsideCombo, true);
509
- document.removeEventListener("scroll", this.detectMouseScroll, true);
510
- this.closed.emit();
511
- }
512
- this.toggled.emit(isOpen);
513
- }
514
- selectedItemHandler(newItem) {
515
- newItem && (newItem.selected = true);
516
- }
517
- removedItemHandler(removedItem) {
518
- const value = removedItem.value;
519
- if (value === this.value) {
520
- /*The removed item was the one selected on the combo. Re-evaluation of new value is needed*/
521
- this.setup();
522
- }
523
- }
524
- setIcon(icon) {
525
- if (icon) {
526
- this.inputTextIcon = icon;
527
- this.inputTextIconPosition = "start";
528
- }
529
- else {
530
- this.inputTextIcon = null;
531
- this.inputTextIconPosition = null;
532
- }
533
- }
534
- focus() {
535
- this.inputText.focus();
536
- }
537
- detectClickOutsideComboFunc(event) {
538
- const comboMainContainer = this.el.shadowRoot.querySelector(".main-container");
539
- const x = event.x;
540
- const y = event.y;
541
- //Contextual menu coordinates
542
- const comboMainContainerArea = comboMainContainer.getBoundingClientRect();
543
- if ((x > comboMainContainerArea.left &&
544
- x < comboMainContainerArea.right &&
545
- y > comboMainContainerArea.top &&
546
- y < comboMainContainerArea.bottom) ||
547
- (event.screenX === 0 &&
548
- event.screenY === 0 &&
549
- event.clientX === 0 &&
550
- event.clientY === 0)) ;
551
- else {
552
- this.listIsOpen = false;
553
- //Click happened outside the combo
554
- }
555
- }
556
- detectMouseScrollFunc() {
557
- this.listIsOpen = false;
558
- }
559
- clearCombo() {
560
- if (!this.disabled) {
561
- this.value = undefined;
562
- this.listIsOpen = true;
563
- this.focus();
564
- }
565
- }
566
- resizeObserver() {
567
- this.myObserver = new ResizeObserver((entries) => {
568
- entries.forEach(() => {
569
- this.repositionItemsContainer();
570
- });
571
- });
572
- this.myObserver.observe(document.body);
573
- this.myObserver.observe(this.el);
574
- }
575
- repositionItemsContainer() {
576
- //redefine .main-container width
577
- const inputText = this.inputText;
578
- const inputTextWidth = inputText.clientWidth;
579
- this.itemsContainer.style.width = inputTextWidth + "px";
580
- //redefine .items-container "top" value
581
- const inputTextBoundingClient = inputText.getBoundingClientRect();
582
- const inputTextY = inputTextBoundingClient.y;
583
- const inputTextHeight = inputTextBoundingClient.height;
584
- this.itemsContainer.style.top = inputTextY + inputTextHeight + "px";
585
- }
586
- itemsContainerBottomOverflows() {
587
- const viewportHeight = window.innerHeight;
588
- const comboBottom = this.el.getBoundingClientRect().bottom;
589
- const itemsContainerHeight = this.itemsContainer.clientHeight;
590
- const result = comboBottom + itemsContainerHeight;
591
- const itOverflows = result > viewportHeight ;
592
- return itOverflows;
593
- }
594
- render() {
595
- const clearIcon = this.value && !this.disableFilter && !this.disableClear;
596
- return (h(Host, { class: {
597
- "gxg-combo-box--disabled": this.disableFilter,
598
- large: state.large,
599
- }, style: { maxWidth: this.maxWidth, minWidth: this.minWidth }, exportParts: this.exportparts ? this.exportparts : null }, h("div", { class: {
600
- "main-container": true,
601
- }, ref: (el) => (this.mainContainer = el) }, this.label ? (h("gxg-label", { labelPosition: this.labelPosition, center: this.centerLabel, width: this.labelWidth }, this.label)) : null, h("div", { class: "search-and-items-container", ref: (el) => (this.searchItemsContainer = el) }, h("div", { class: { "search-container": true } }, h("gxg-form-text", { placeholder: this.placeholder, onInput: this.inputHandler.bind(this), onKeyDown: this.keyDownHandler, onClick: this.inputTextClickHandler, value: this.text, icon: this.fixedIcon || this.inputTextIcon, iconPosition: this.fixedIcon ? "start" : this.inputTextIconPosition, readonly: this.disableFilter, ref: (el) => (this.inputText = el), validationStatus: this.validationStatus, disabled: this.disabled, onValueChanged: this.handleValueChangeFormText, cursorEnd: this.cursorEnd, preventValueChangedEmit: true, preventValueChangeOnDisabled: true, class: { "clear-icon": clearIcon }, part: this.parts.input }), h("div", { class: "buttons-wrapper" }, clearIcon ? (h("gxg-button", { class: { "button-icon delete-icon": true }, icon: "menus/delete", type: "tertiary", onClick: () => this.clearCombo(), tabindex: "-1", fit: true, disabled: this.disabled, part: this.parts.clearButton })) : null, h("gxg-button", { class: { "button-icon": true }, icon: "navigation/arrow-down", type: "secondary-icon-only", onClick: this.toggleListButtonClickHandler, fit: true, disabled: this.disabled, tabindex: "-1", part: this.parts.toggleButton }))), h("div", { class: {
602
- "items-container": true,
603
- "items-container--show": this.listIsOpen,
604
- "items-container--no-match": this.noMatch,
605
- "items-container--below": this.listPosition === "below",
606
- "items-container--above": this.listPosition === "above",
607
- }, style: { maxHeight: this.listMaxHeight }, ref: (el) => (this.itemsContainer = el) }, h("slot", null), this.noMatch && this.strict ? (h("div", { class: "no-ocurrences-found" }, "No occurrences found", h("span", null, "ctrl/cmd + backspace to erase"))) : null))), this.formMessageLogic(this)));
608
- }
609
- static get delegatesFocus() { return true; }
610
- get el() { return getElement(this); }
611
- static get watchers() { return {
612
- "disabled": ["disabledHandler"],
613
- "value": ["onValueChanged"],
614
- "listIsOpen": ["listIsOpenHandler"],
615
- "selectedItem": ["selectedItemHandler"],
616
- "removedItem": ["removedItemHandler"]
617
- }; }
618
- };
619
- GxgComboBox.style = comboBoxCss;
620
-
621
- const comboBoxItemCss = ":host(.gxg--disabled) .form-element,:host(.gxg--disabled.form-element){pointer-events:none;background-color:var(--color-background-disabled) !important;color:var(--color-on-background--disabled) !important;border-color:var(--gxg-border-color--disabled) !important;cursor:default !important}:host{display:block;cursor:pointer;box-sizing:border-box;display:flex;align-items:center;font-family:var(--font-family-primary);font-size:var(--font-size-sm);background-color:var(--color-background);color:var(--color-on-background);opacity:1;overflow:hidden}:host .container{display:flex;align-items:center;padding:var(--spacing-comp-00) var(--spacing-comp-01);width:100%;height:var(--gxg-list-item-height);box-sizing:border-box;}:host gxg-icon{flex-shrink:0}.description{white-space:nowrap;width:100%;overflow:hidden;text-overflow:ellipsis}:host(.no-icon) .container{padding-left:var(--spacing-comp-02)}:host([hidden]){display:none}:host(.display-none){display:none}:host(:hover){background-color:var(--gxg-background-color-item-hover)}:host([selected]){background-color:var(--gxg-background-color-item-selected);color:var(--gxg-color-selected)}:host(.large){font-size:var(--font-size-lg);min-height:auto}:host(.large) gxg-icon{margin-right:var(--spacing-comp-01)}";
622
-
623
- const GxgComboBoxItem = class {
624
- constructor(hostRef) {
625
- registerInstance(this, hostRef);
626
- this.itemSelected = createEvent(this, "itemSelected", 7);
627
- this.itemDidLoad = createEvent(this, "itemDidLoad", 7);
628
- this.keyDownPressed = createEvent(this, "keyDownPressed", 7);
629
- /**
630
- * Any icon that belongs to Gemini icon library: https://gx-gemini.netlify.app/?path=/story/icons
631
- */
632
- this.icon = undefined;
633
- /**
634
- * The presence of this attribute makes this combo-item disabled and not interactive.
635
- */
636
- this.disabled = false;
637
- /**
638
- * The presence of this attribute makes this combo-item selected.
639
- */
640
- this.selected = false;
641
- /**
642
- * True if the text typed on the combo box input is equal to this combo box item text
643
- */
644
- this.exactMatch = false;
645
- /**
646
- * This property hides the combo box item
647
- */
648
- this.hidden = false;
649
- /*********************************
650
- WATCH
651
- *********************************/
652
- this.setup = () => {
653
- if (!this.value) {
654
- this.value = this.el.innerHTML;
655
- }
656
- };
657
- this.clickHandler = () => {
658
- this.itemSelected.emit({
659
- el: this.el,
660
- index: this.index,
661
- value: this.value,
662
- icon: this.icon,
663
- });
664
- };
665
- }
666
- componentWillLoad() {
667
- this.setup();
668
- this.disabled ? (this.iconColor = "ondisabled") : (this.iconColor = "auto");
669
- }
670
- componentDidLoad() {
671
- this.itemDidLoad.emit({
672
- el: this.el,
673
- index: this.index,
674
- value: this.value,
675
- icon: this.icon,
676
- });
677
- }
678
- iconColorHandler() {
679
- if (this.disabled) {
680
- return "disabled";
681
- }
682
- else if (this.selected) {
683
- return "auto";
684
- }
685
- else {
686
- return "auto";
687
- }
688
- }
689
- render() {
690
- return (h(Host, { onClick: this.clickHandler, class: {
691
- large: state.large,
692
- "no-icon": !this.icon,
693
- [commonClassesNames["DISABLED_CLASS"]]: this.disabled,
694
- } }, h("div", { class: { container: true, "form-element": true } }, this.icon ? (h("gxg-icon", { color: this.iconColorHandler(), size: state.large ? "regular" : "small", type: this.icon })) : null, h("div", { class: "description" }, h("slot", null)))));
695
- }
696
- get el() { return getElement(this); }
697
- };
698
- GxgComboBoxItem.style = comboBoxItemCss;
3
+ import { e as exportParts } from './export-parts-7f208d57.js';
699
4
 
700
5
  const tabCss = ":root{--ui-animaton-speed:0.2s}.gxg-title-01{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-01--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-02{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-02--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-bold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-03{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em}.gxg-title-03--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;text-transform:uppercase;line-height:1.556em;color:var(--color-on-primary)}.gxg-title-04{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-title-04--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);letter-spacing:var(--letter-spacing-md);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-title-05{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em}.gxg-title-05--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-sm);color:var(--color-on-background);text-align:start;line-height:1.556em;color:var(--color-on-primary)}.gxg-text{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em}.gxg-text--negative{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-on-primary)}.gxg-text--gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--gray-05)}.gxg-quote{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;font-style:italic}.gxg-quote--negative{color:var(--color-on-primary)}.gxg-link{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block}.gxg-link:hover{color:var(--color-primary-hover)}.gxg-link:active{color:var(--color-primary-active)}.gxg-link-gray{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04)}.gxg-link-gray:hover{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-primary);text-decoration:underline;cursor:pointer;display:inline-block;color:var(--gray-04);color:var(--gray-06)}.gxg-alert-error{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-error-dark);display:inline-block}.gxg-alert-warning{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-warning-dark);display:inline-block}.gxg-alert-success{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;color:var(--color-success-dark);display:inline-block}.gxg-tab--disabled{color:var(--color-primary-disabled);pointer-events:none}.gxg-tab--disabled[disabled]{color:var(--color-primary-disabled);pointer-events:none}.gxg-label{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-label:hover{color:var(--color-primary-hover)}.gxg-label:focus{color:var(--color-primary-active)}.gxg-label:active{color:var(--color-primary-active)}.gxg-label[disabled]{color:var(--color-primary-disabled)}.gxg-label--negative{color:var(--color-on-primary)}.gxg-label--negative[disabled]{color:var(--color-on-disabled)}.gxg-button-styles{font-family:var(--font-family-primary) !important;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm) !important;letter-spacing:var(--letter-spacing-xs);color:var(--color-primary-enabled);text-align:center;line-height:1.455em}.gxg-scrollbar{}.gxg-scrollbar::-webkit-scrollbar{width:6px;height:6px}.gxg-scrollbar::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}.gxg-scrollbar::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}:host{height:100%;display:block}:host .container{font-family:var(--font-family-primary);font-weight:var(--font-weight-regular);font-size:var(--font-size-sm);letter-spacing:var(--letter-spacing-xs);color:var(--color-on-background);text-align:start;line-height:1.455em;height:100%;box-sizing:border-box;padding:var(--spacing-comp-03)}:host(.not-selected){display:none}:host(.no-padding) .container{padding:0}.container--flex{display:flex}.container--flex.flex-column{flex-direction:column}.container--flex.flex-row{flex-direction:row}:host(.large) .container{font-size:var(--font-size-lg)}";
701
6
 
@@ -1154,4 +459,4 @@ const GxgTabs = class {
1154
459
  };
1155
460
  GxgTabs.style = tabsCss;
1156
461
 
1157
- export { GxgComboBox as gxg_combo_box, GxgComboBoxItem as gxg_combo_box_item, GxgTab as gxg_tab, GxgTabBar as gxg_tab_bar, GxgTabButton as gxg_tab_button, GxgTabs as gxg_tabs };
462
+ export { GxgTab as gxg_tab, GxgTabBar as gxg_tab_bar, GxgTabButton as gxg_tab_button, GxgTabs as gxg_tabs };