@genexus/genexus-ide-ui 0.0.13 → 0.0.15

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 (94) hide show
  1. package/dist/cjs/ch-suggest_5.cjs.entry.js +379 -0
  2. package/dist/cjs/genexus-ide-ui.cjs.js +1 -1
  3. package/dist/cjs/gx-ide-container_2.cjs.entry.js +168 -0
  4. package/dist/cjs/gx-ide-new-kb.cjs.entry.js +13 -5
  5. package/dist/cjs/gx-ide-references.cjs.entry.js +299 -0
  6. package/dist/cjs/gx-ide-test.cjs.entry.js +2 -25
  7. package/dist/cjs/{gx-ide-container_10.cjs.entry.js → gxg-combo-box_8.cjs.entry.js} +58 -178
  8. package/dist/cjs/gxg-test.cjs.entry.js +2 -2
  9. package/dist/cjs/{gxg-tree-item.cjs.entry.js → gxg-tree_2.cjs.entry.js} +167 -0
  10. package/dist/cjs/loader.cjs.js +1 -1
  11. package/dist/cjs/render-tree-25d5b8a1.js +29 -0
  12. package/dist/collection/collection-manifest.json +1 -0
  13. package/dist/collection/common/render-suggest.js +18 -0
  14. package/dist/collection/components/new-kb/new-kb.css +8 -4
  15. package/dist/collection/components/new-kb/new-kb.js +12 -4
  16. package/dist/collection/components/references/gx-ide-assets/references/langs/references.lang.en.json +15 -0
  17. package/dist/collection/components/references/gx-ide-assets/references/langs/references.lang.ja.json +3 -0
  18. package/dist/collection/components/references/gx-ide-assets/references/langs/references.lang.zh.json +3 -0
  19. package/dist/collection/components/references/helpers.js +76 -0
  20. package/dist/collection/components/references/references.css +194 -0
  21. package/dist/collection/components/references/references.js +377 -0
  22. package/dist/collection/index.js +1 -0
  23. package/dist/components/ch-suggest-list-item.js +1 -58
  24. package/dist/{esm/ch-suggest-list-item.entry.js → components/ch-suggest-list-item2.js} +27 -8
  25. package/dist/components/ch-suggest-list.js +1 -39
  26. package/dist/components/ch-suggest-list2.js +41 -0
  27. package/dist/components/ch-suggest.js +1 -259
  28. package/dist/{esm/ch-suggest.entry.js → components/ch-suggest2.js} +49 -19
  29. package/dist/components/gx-ide-new-kb.js +13 -5
  30. package/dist/components/gx-ide-references.d.ts +11 -0
  31. package/dist/components/gx-ide-references.js +433 -0
  32. package/dist/components/gx-ide-test.js +2 -25
  33. package/dist/components/gxg-suggest.js +1 -55
  34. package/dist/components/gxg-test.js +2 -2
  35. package/dist/components/gxg-text.js +1 -88
  36. package/dist/components/index.d.ts +1 -0
  37. package/dist/components/index.js +1 -0
  38. package/dist/components/render-tree.js +27 -0
  39. package/dist/{esm/gxg-suggest.entry.js → components/suggest.js} +29 -10
  40. package/dist/components/tab-bar.js +29 -13
  41. package/dist/components/tab-button.js +18 -2
  42. package/dist/components/tabs.js +15 -2
  43. package/dist/{esm/gxg-text.entry.js → components/text.js} +30 -8
  44. package/dist/esm/ch-suggest_5.entry.js +371 -0
  45. package/dist/esm/genexus-ide-ui.js +1 -1
  46. package/dist/esm/gx-ide-container_2.entry.js +163 -0
  47. package/dist/esm/gx-ide-new-kb.entry.js +13 -5
  48. package/dist/esm/gx-ide-references.entry.js +295 -0
  49. package/dist/esm/gx-ide-test.entry.js +2 -25
  50. package/dist/esm/{gx-ide-container_10.entry.js → gxg-combo-box_8.entry.js} +60 -178
  51. package/dist/esm/gxg-test.entry.js +2 -2
  52. package/dist/esm/{gxg-tree-item.entry.js → gxg-tree_2.entry.js} +168 -2
  53. package/dist/esm/loader.js +1 -1
  54. package/dist/esm/render-tree-fc8636a3.js +27 -0
  55. package/dist/genexus-ide-ui/genexus-ide-ui.esm.js +1 -1
  56. package/dist/genexus-ide-ui/gx-ide-assets/references/langs/references.lang.en.json +15 -0
  57. package/dist/genexus-ide-ui/gx-ide-assets/references/langs/references.lang.ja.json +3 -0
  58. package/dist/genexus-ide-ui/gx-ide-assets/references/langs/references.lang.zh.json +3 -0
  59. package/dist/genexus-ide-ui/p-0f5d0ccc.entry.js +1 -0
  60. package/dist/genexus-ide-ui/p-1dcba164.entry.js +1 -0
  61. package/dist/genexus-ide-ui/p-1e412d88.entry.js +1 -0
  62. package/dist/genexus-ide-ui/p-2761a056.entry.js +1 -0
  63. package/dist/genexus-ide-ui/p-62814082.entry.js +1 -0
  64. package/dist/genexus-ide-ui/{p-f5aa333b.entry.js → p-97430828.entry.js} +1 -1
  65. package/dist/genexus-ide-ui/p-a5fee36d.entry.js +1 -0
  66. package/dist/genexus-ide-ui/p-abee8c7b.js +1 -0
  67. package/dist/genexus-ide-ui/p-be9406e7.entry.js +1 -0
  68. package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-bar/tab-bar.css +4 -0
  69. package/dist/node_modules/@genexus/gemini/dist/collection/components/tab-button/tab-button.css +3 -0
  70. package/dist/node_modules/@genexus/gemini/dist/collection/components/tabs/tabs.css +1 -1
  71. package/dist/types/common/render-suggest.d.ts +2 -0
  72. package/dist/types/components/references/helpers.d.ts +17 -0
  73. package/dist/types/components/references/references.d.ts +125 -0
  74. package/dist/types/components.d.ts +78 -0
  75. package/dist/types/index.d.ts +1 -0
  76. package/package.json +3 -3
  77. package/dist/cjs/ch-suggest-list-item.cjs.entry.js +0 -45
  78. package/dist/cjs/ch-suggest-list.cjs.entry.js +0 -28
  79. package/dist/cjs/ch-suggest.cjs.entry.js +0 -226
  80. package/dist/cjs/gxg-suggest.cjs.entry.js +0 -42
  81. package/dist/cjs/gxg-text.cjs.entry.js +0 -72
  82. package/dist/cjs/gxg-tree.cjs.entry.js +0 -173
  83. package/dist/esm/ch-suggest-list.entry.js +0 -24
  84. package/dist/esm/gxg-tree.entry.js +0 -169
  85. package/dist/genexus-ide-ui/p-0a954e0f.entry.js +0 -1
  86. package/dist/genexus-ide-ui/p-20a45778.entry.js +0 -1
  87. package/dist/genexus-ide-ui/p-23d4b295.entry.js +0 -1
  88. package/dist/genexus-ide-ui/p-4e78d56d.entry.js +0 -1
  89. package/dist/genexus-ide-ui/p-5463844e.entry.js +0 -1
  90. package/dist/genexus-ide-ui/p-5faaf0e5.entry.js +0 -1
  91. package/dist/genexus-ide-ui/p-7a5e0988.entry.js +0 -1
  92. package/dist/genexus-ide-ui/p-a985b448.entry.js +0 -1
  93. package/dist/genexus-ide-ui/p-ad9fe469.entry.js +0 -1
  94. package/dist/genexus-ide-ui/p-b3727324.entry.js +0 -1
@@ -13,6 +13,7 @@ import { LabelPosition as LabelPosition1 } from "./components/directory-selector
13
13
  import { GxOption } from "./common/types";
14
14
  import { CancelCallback, ChangedCallback, CreateCallback } from "./components/new-environment/new-environment";
15
15
  import { CancelCallback as CancelCallback1, CreateCallback as CreateCallback1, SelectLocationCallback } from "./components/new-kb/new-kb";
16
+ import { LoadReferencesCallback, ObjectData, OpenObjectCallback, OpenSelectorDialogCallback, SelectorSourceCallback, SelectReferenceCallback } from "./components/references/references";
16
17
  import { GxgTreeItemData } from "@genexus/gemini/dist/types/components/tree-item/gxg-tree-item";
17
18
  export namespace Components {
18
19
  interface GxIdeContainer {
@@ -293,6 +294,36 @@ export namespace Components {
293
294
  */
294
295
  "userName": string;
295
296
  }
297
+ interface GxIdeReferences {
298
+ /**
299
+ * If true, will hide the top-bar
300
+ */
301
+ "hideTopBar": false;
302
+ /**
303
+ * Callback invoked when a node is expanded in any of the references panels
304
+ */
305
+ "loadReferencesCallback"?: LoadReferencesCallback;
306
+ /**
307
+ * Callback invoked when user wants to open an object
308
+ */
309
+ "openObjectCallback"?: OpenObjectCallback;
310
+ /**
311
+ * Callback invoked when user wants to show object selection dialog
312
+ */
313
+ "openSelectorDialogCallback"?: OpenSelectorDialogCallback;
314
+ /**
315
+ * Callback invoked when any item from the references panels is selected
316
+ */
317
+ "selectReferenceCallback"?: SelectReferenceCallback;
318
+ /**
319
+ * Currently selected object
320
+ */
321
+ "selectedObject"?: ObjectData;
322
+ /**
323
+ * Callback invoked when user writes on object selector input, return possible options to show in autocomplete list
324
+ */
325
+ "selectorSourceCallback"?: SelectorSourceCallback;
326
+ }
296
327
  interface GxIdeTemplate {
297
328
  /**
298
329
  * If true, will hide the top-bar
@@ -326,6 +357,10 @@ export interface GxIdeNewKbCustomEvent<T> extends CustomEvent<T> {
326
357
  detail: T;
327
358
  target: HTMLGxIdeNewKbElement;
328
359
  }
360
+ export interface GxIdeReferencesCustomEvent<T> extends CustomEvent<T> {
361
+ detail: T;
362
+ target: HTMLGxIdeReferencesElement;
363
+ }
329
364
  export interface GxIdeTemplateCustomEvent<T> extends CustomEvent<T> {
330
365
  detail: T;
331
366
  target: HTMLGxIdeTemplateElement;
@@ -361,6 +396,12 @@ declare global {
361
396
  prototype: HTMLGxIdeNewKbElement;
362
397
  new (): HTMLGxIdeNewKbElement;
363
398
  };
399
+ interface HTMLGxIdeReferencesElement extends Components.GxIdeReferences, HTMLStencilElement {
400
+ }
401
+ var HTMLGxIdeReferencesElement: {
402
+ prototype: HTMLGxIdeReferencesElement;
403
+ new (): HTMLGxIdeReferencesElement;
404
+ };
364
405
  interface HTMLGxIdeTemplateElement extends Components.GxIdeTemplate, HTMLStencilElement {
365
406
  }
366
407
  var HTMLGxIdeTemplateElement: {
@@ -385,6 +426,7 @@ declare global {
385
426
  "gx-ide-entity-selector": HTMLGxIdeEntitySelectorElement;
386
427
  "gx-ide-new-environment": HTMLGxIdeNewEnvironmentElement;
387
428
  "gx-ide-new-kb": HTMLGxIdeNewKbElement;
429
+ "gx-ide-references": HTMLGxIdeReferencesElement;
388
430
  "gx-ide-template": HTMLGxIdeTemplateElement;
389
431
  "gx-ide-test": HTMLGxIdeTestElement;
390
432
  "gx-ide-top-bar": HTMLGxIdeTopBarElement;
@@ -677,6 +719,40 @@ declare namespace LocalJSX {
677
719
  */
678
720
  "userName"?: string;
679
721
  }
722
+ interface GxIdeReferences {
723
+ /**
724
+ * If true, will hide the top-bar
725
+ */
726
+ "hideTopBar"?: false;
727
+ /**
728
+ * Callback invoked when a node is expanded in any of the references panels
729
+ */
730
+ "loadReferencesCallback"?: LoadReferencesCallback;
731
+ /**
732
+ * @description Gets fired when the component has rendered for the first time.
733
+ */
734
+ "onComponentDidRenderEvent"?: (event: GxIdeReferencesCustomEvent<string>) => void;
735
+ /**
736
+ * Callback invoked when user wants to open an object
737
+ */
738
+ "openObjectCallback"?: OpenObjectCallback;
739
+ /**
740
+ * Callback invoked when user wants to show object selection dialog
741
+ */
742
+ "openSelectorDialogCallback"?: OpenSelectorDialogCallback;
743
+ /**
744
+ * Callback invoked when any item from the references panels is selected
745
+ */
746
+ "selectReferenceCallback"?: SelectReferenceCallback;
747
+ /**
748
+ * Currently selected object
749
+ */
750
+ "selectedObject"?: ObjectData;
751
+ /**
752
+ * Callback invoked when user writes on object selector input, return possible options to show in autocomplete list
753
+ */
754
+ "selectorSourceCallback"?: SelectorSourceCallback;
755
+ }
680
756
  interface GxIdeTemplate {
681
757
  /**
682
758
  * If true, will hide the top-bar
@@ -711,6 +787,7 @@ declare namespace LocalJSX {
711
787
  "gx-ide-entity-selector": GxIdeEntitySelector;
712
788
  "gx-ide-new-environment": GxIdeNewEnvironment;
713
789
  "gx-ide-new-kb": GxIdeNewKb;
790
+ "gx-ide-references": GxIdeReferences;
714
791
  "gx-ide-template": GxIdeTemplate;
715
792
  "gx-ide-test": GxIdeTest;
716
793
  "gx-ide-top-bar": GxIdeTopBar;
@@ -725,6 +802,7 @@ declare module "@stencil/core" {
725
802
  "gx-ide-entity-selector": LocalJSX.GxIdeEntitySelector & JSXBase.HTMLAttributes<HTMLGxIdeEntitySelectorElement>;
726
803
  "gx-ide-new-environment": LocalJSX.GxIdeNewEnvironment & JSXBase.HTMLAttributes<HTMLGxIdeNewEnvironmentElement>;
727
804
  "gx-ide-new-kb": LocalJSX.GxIdeNewKb & JSXBase.HTMLAttributes<HTMLGxIdeNewKbElement>;
805
+ "gx-ide-references": LocalJSX.GxIdeReferences & JSXBase.HTMLAttributes<HTMLGxIdeReferencesElement>;
728
806
  "gx-ide-template": LocalJSX.GxIdeTemplate & JSXBase.HTMLAttributes<HTMLGxIdeTemplateElement>;
729
807
  "gx-ide-test": LocalJSX.GxIdeTest & JSXBase.HTMLAttributes<HTMLGxIdeTestElement>;
730
808
  "gx-ide-top-bar": LocalJSX.GxIdeTopBar & JSXBase.HTMLAttributes<HTMLGxIdeTopBarElement>;
@@ -1,2 +1,3 @@
1
1
  import "@genexus/gemini";
2
2
  export * from "./components";
3
+ import "@genexus/chameleon-controls-library";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genexus/genexus-ide-ui",
3
3
  "license": "Apache-2.0",
4
- "version": "0.0.13",
4
+ "version": "0.0.15",
5
5
  "description": "GeneXus IDE UI components",
6
6
  "main": "dist/index.cjs.js",
7
7
  "module": "dist/index.js",
@@ -36,10 +36,10 @@
36
36
  "@types/react": "^18.2.8"
37
37
  },
38
38
  "peerDependencies": {
39
- "@genexus/gemini": "*0.1.420"
39
+ "@genexus/gemini": "*0.1.423"
40
40
  },
41
41
  "devDependencies": {
42
- "@genexus/gemini": "*0.1.420",
42
+ "@genexus/gemini": "*0.1.423",
43
43
  "@stencil-community/eslint-plugin": "^0.5.0",
44
44
  "@stencil/core": "^2.17.0",
45
45
  "@stencil/sass": "^2.0.1",
@@ -1,45 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-93a6a7e0.js');
6
-
7
- const chSuggestListItemCss = ":host{display:block}:where(button){all:unset;display:flex;width:100%;cursor:pointer}*,::after,::before{box-sizing:border-box}";
8
-
9
- const ARROW_DOWN = "ArrowDown";
10
- const ARROW_UP = "ArrowUp";
11
- const ChSuggestListItem = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.itemSelected = index.createEvent(this, "itemSelected", 7);
15
- this.focusChangeAttempt = index.createEvent(this, "focusChangeAttempt", 7);
16
- // 6.COMPONENT LIFECYCLE EVENTS //
17
- // 7.LISTENERS //
18
- // 8.PUBLIC METHODS API //
19
- // 9.LOCAL METHODS //
20
- this.handleClick = () => {
21
- this.itemSelected.emit({
22
- value: this.value || this.el.innerText,
23
- description: this.description
24
- });
25
- };
26
- this.handleKeyDown = (e) => {
27
- if (e.code === ARROW_UP || e.code === ARROW_DOWN) {
28
- e.preventDefault();
29
- this.focusChangeAttempt.emit({
30
- el: this.el,
31
- code: e.code
32
- });
33
- }
34
- };
35
- }
36
- // 10.RENDER() FUNCTION //
37
- render() {
38
- return (index.h(index.Host, { role: "listitem", onKeyDown: this.handleKeyDown }, index.h("button", { part: "button", onClick: this.handleClick }, index.h("slot", { name: "icon" }), index.h("div", { class: "content-wrapper", part: "content-wrapper" }, index.h("slot", null), this.description && (index.h("span", { part: "description" }, this.description))))));
39
- }
40
- static get delegatesFocus() { return true; }
41
- get el() { return index.getElement(this); }
42
- };
43
- ChSuggestListItem.style = chSuggestListItemCss;
44
-
45
- exports.ch_suggest_list_item = ChSuggestListItem;
@@ -1,28 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-93a6a7e0.js');
6
-
7
- const chSuggestListCss = "*,::after,::before{box-sizing:border-box}:host{display:block}.title{margin:0;font:inherit}.list{margin:0;padding:0}";
8
-
9
- const ChSuggestList = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- }
13
- // 2.REFERENCE TO ELEMENTS //
14
- // 3.STATE() VARIABLES //
15
- // 4.PUBLIC PROPERTY API / WATCH'S //
16
- // 5.EVENTS (EMIT) //
17
- // 6.COMPONENT LIFECYCLE EVENTS //
18
- // 7.LISTENERS //
19
- // 8.PUBLIC METHODS API //
20
- // 9.LOCAL METHODS //
21
- // 10.RENDER() FUNCTION //
22
- render() {
23
- return (index.h(index.Host, null, this.label && (index.h("h2", { id: "heading", part: "title", class: "title" }, this.label)), index.h("ul", { "aria-labelledby": this.label ? "heading" : undefined, part: "list", class: "list" }, index.h("slot", null))));
24
- }
25
- };
26
- ChSuggestList.style = chSuggestListCss;
27
-
28
- exports.ch_suggest_list = ChSuggestList;
@@ -1,226 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-93a6a7e0.js');
6
-
7
- const chSuggestCss = "*,::after,::before{box-sizing:border-box}:host{--window-max-height:none;--window-gap:50px}.main-wrapper{display:block}.label-input-wrapper{display:flex}.label-input-wrapper .input{flex:1}:host([label-position=start]) .label-input-wrapper{flex-direction:row}:host([label-position=above]) .label-input-wrapper{flex-direction:column}.input{background-color:unset;border:none;color:inherit;font:inherit;margin:0;padding:0;outline:0}.ch-window-container{position:relative}ch-window::part(window){width:100%;max-height:calc(var(--window-max-height) - var(--window-gap));overflow-y:auto}";
8
-
9
- const ARROW_DOWN = "ArrowDown";
10
- const ARROW_UP = "ArrowUp";
11
- const ChSuggest = class {
12
- constructor(hostRef) {
13
- index.registerInstance(this, hostRef);
14
- this.valueChanged = index.createEvent(this, "valueChanged", 7);
15
- this.keyEventsDictionary = {
16
- ArrowDown: (e) => {
17
- const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_DOWN);
18
- const nextFocusedItem = this.getNewFocusedItem(newFocusedItem, ARROW_DOWN);
19
- newFocusedItem && newFocusedItem.focus();
20
- if (!nextFocusedItem) {
21
- /* This is the last item. Adjust window scroll to be at the very bottom*/
22
- this.scrollListToBottom();
23
- }
24
- },
25
- ArrowUp: (e) => {
26
- const newFocusedItem = this.getNewFocusedItem(e.currentFocusedItem, ARROW_UP);
27
- const nextFocusedItem = this.getNewFocusedItem(newFocusedItem, ARROW_UP);
28
- newFocusedItem && newFocusedItem.focus();
29
- if (!nextFocusedItem) {
30
- /* This is the first item. Adjust window scroll to be at the very top*/
31
- this.scrollListToTop();
32
- }
33
- }
34
- };
35
- // 3.STATE() VARIABLES //
36
- this.windowHidden = true;
37
- this.slotIsEmpty = true;
38
- // 4.PUBLIC PROPERTY API / WATCH'S //
39
- /**
40
- * The debounce amount in milliseconds (This is the time the suggest waits after the user has finished typing, to show the suggestions).
41
- */
42
- this.debounce = 500;
43
- /**
44
- * The label position
45
- */
46
- this.labelPosition = "start";
47
- /**
48
- * Whether or not to display the label
49
- */
50
- this.showLabel = true;
51
- /**
52
- * Wether or not the suggest has a header. The header will show the "suggestTitle" if provided, and a close button.
53
- */
54
- this.showHeader = false;
55
- /**
56
- * If true, it will position the cursor at the end when the input is focused.
57
- */
58
- this.cursorEnd = false;
59
- // 10.LOCAL METHODS //
60
- this.evaluateSlotIsEmpty = () => {
61
- this.slotIsEmpty = !this.el.firstElementChild;
62
- };
63
- this.setFocusOnFirstItem = () => {
64
- const firstItem = this.el.querySelector("ch-suggest-list-item");
65
- firstItem && firstItem.focus();
66
- };
67
- this.getChSuggestListItems = () => Array.from(this.el.querySelectorAll("ch-suggest-list-item"));
68
- this.getNewFocusedItem = (currentFocusedItem, direction) => {
69
- /* Helper function that returns the list item that should get focus (the first one, or the last one)*/
70
- const getListChild = (list) => {
71
- const listItems = list.querySelectorAll("ch-suggest-list-item");
72
- let listChild = listItems && listItems[listItems.length - 1];
73
- if (direction === ARROW_DOWN) {
74
- listChild = list.querySelector("ch-suggest-list-item");
75
- }
76
- else {
77
- const parentListItems = list.querySelectorAll("ch-suggest-list-item");
78
- listChild =
79
- parentListItems && parentListItems[parentListItems.length - 1];
80
- }
81
- return listChild;
82
- };
83
- if (!currentFocusedItem) {
84
- return;
85
- }
86
- let newFocusedItem = direction === ARROW_DOWN
87
- ? currentFocusedItem.nextElementSibling
88
- : currentFocusedItem.previousElementSibling;
89
- if ((newFocusedItem === null || newFocusedItem === void 0 ? void 0 : newFocusedItem.nodeName) === "CH-SUGGEST-LIST") {
90
- newFocusedItem = getListChild(newFocusedItem);
91
- }
92
- else if (!newFocusedItem) {
93
- /* this could be the last item of a list, but not the last item*/
94
- const parent = currentFocusedItem.parentElement;
95
- const sibling = direction === ARROW_DOWN
96
- ? parent.nextElementSibling
97
- : parent.previousElementSibling;
98
- const parentIsList = parent.nodeName === "CH-SUGGEST-LIST";
99
- if (parentIsList &&
100
- sibling &&
101
- sibling.nodeName === "CH-SUGGEST-LIST-ITEM") {
102
- newFocusedItem =
103
- direction === ARROW_DOWN
104
- ? parent.nextElementSibling
105
- : parent.previousElementSibling;
106
- }
107
- else if (parentIsList &&
108
- sibling &&
109
- sibling.nodeName === "CH-SUGGEST-LIST") {
110
- const parentList = direction === ARROW_DOWN
111
- ? parent.nextElementSibling
112
- : parent.previousElementSibling;
113
- let listChild;
114
- if (direction === ARROW_DOWN) {
115
- listChild = parentList.querySelector("ch-suggest-list-item");
116
- }
117
- else {
118
- listChild = getListChild(parentList);
119
- }
120
- newFocusedItem = listChild ? listChild : null;
121
- }
122
- }
123
- return newFocusedItem;
124
- };
125
- /**
126
- * Every time the input event is triggered, the value of the input is sent to processInputEvent, which is responsible for displaying a window with the suggested options. this.debounce is a delay that, along with clearTimeout, ensures that the window is only shown after the user has stopped typing.
127
- */
128
- this.handleInput = (e) => {
129
- this.value = e.target.value;
130
- if (this.timeoutReference) {
131
- clearTimeout(this.timeoutReference);
132
- }
133
- this.timeoutReference = setTimeout(() => {
134
- this.processInputEvent();
135
- }, this.debounce);
136
- };
137
- this.handleKeyDown = (e) => {
138
- if (e.key === ARROW_DOWN) {
139
- e.preventDefault();
140
- this.setFocusOnFirstItem();
141
- }
142
- };
143
- this.evaluateWindowMaxHeight = () => {
144
- const viewportHeight = window.innerHeight;
145
- const documentHeight = document.body.scrollHeight;
146
- const height = documentHeight >= viewportHeight ? documentHeight : viewportHeight;
147
- const inputBottomPosition = this.textInput.getBoundingClientRect().bottom + window.scrollY;
148
- const windowMaxHeight = height - inputBottomPosition + "px";
149
- this.el.style.setProperty("--window-max-height", windowMaxHeight);
150
- };
151
- this.scrollListToTop = () => {
152
- const partWindow = this.chWindow.shadowRoot.querySelector("[part='window']");
153
- partWindow.scrollTop = 0;
154
- };
155
- this.scrollListToBottom = () => {
156
- const partWindow = this.chWindow.shadowRoot.querySelector("[part='window']");
157
- partWindow.scrollTop = partWindow.scrollHeight;
158
- };
159
- this.processInputEvent = () => {
160
- this.evaluateWindowMaxHeight();
161
- this.chWindow.hidden = this.slotIsEmpty;
162
- };
163
- this.closeWindow = () => {
164
- this.chWindow.hidden = true;
165
- };
166
- this.onFocusHandler = () => {
167
- if (this.cursorEnd) {
168
- this.textInput.setSelectionRange(this.textInput.value.length, this.textInput.value.length);
169
- }
170
- };
171
- }
172
- watchValueHandler(newValue) {
173
- this.valueChanged.emit(newValue);
174
- }
175
- // 6.COMPONENT LIFECYCLE EVENTS //
176
- componentWillLoad() {
177
- this.evaluateSlotIsEmpty();
178
- }
179
- // 7.LISTENERS //
180
- itemSelectedHandler(event) {
181
- this.value = event.detail.value;
182
- this.closeWindow();
183
- }
184
- focusChangeAttemptHandler(event) {
185
- const keyEventHandler = this.keyEventsDictionary[event.detail.code];
186
- if (keyEventHandler) {
187
- const currentFocusedItem = event.detail.el;
188
- const chSuggestListItemsArray = this.getChSuggestListItems();
189
- const currentFocusedItemIndex = chSuggestListItemsArray.findIndex(item => {
190
- return item === currentFocusedItem;
191
- });
192
- const newItemToSetFocusOn = null;
193
- keyEventHandler({
194
- event: event.detail,
195
- currentFocusedItem: currentFocusedItem,
196
- chSuggestListItemsArray: chSuggestListItemsArray,
197
- currentFocusedItemIndex: currentFocusedItemIndex,
198
- newItemToSetFocusOn: newItemToSetFocusOn
199
- });
200
- }
201
- }
202
- windowClosedHandler() {
203
- this.textInput.focus();
204
- this.windowHidden = true;
205
- }
206
- // 9.PUBLIC METHODS API //
207
- /**
208
- * @description It selects/highlights the input text.
209
- */
210
- async selectInputText() {
211
- this.textInput.focus();
212
- this.textInput.select();
213
- }
214
- // 10.RENDER() FUNCTION //
215
- render() {
216
- return (index.h(index.Host, null, index.h("div", { class: "main-wrapper", part: "main-wrapper" }, index.h("div", { class: "label-input-wrapper", part: "label-input-wrapper" }, this.showLabel && this.label && (index.h("label", { id: "label", htmlFor: "input", part: "label" }, this.label)), index.h("input", { type: "text", id: "input", part: "input", class: "input", ref: el => (this.textInput = el), onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: this.onFocusHandler, value: this.value, autocomplete: "off", "aria-controls": "ch-window", "aria-label": !this.showLabel && this.label ? this.label : undefined, "aria-labelledby": this.showLabel && this.label ? "label" : undefined, "aria-expanded": this.windowHidden.toString() })), index.h("ch-window", { id: "ch-window", container: this.textInput, "close-on-outside-click": true, "close-on-escape": true, xAlign: "inside-start", yAlign: "outside-end", ref: el => (this.chWindow = el), showHeader: this.showHeader, caption: this.suggestTitle, exportparts: "\n header:header, \n caption:title, \n close:close-button,\n window:dropdown" }, index.h("slot", { onSlotchange: this.evaluateSlotIsEmpty })))));
217
- }
218
- static get delegatesFocus() { return true; }
219
- get el() { return index.getElement(this); }
220
- static get watchers() { return {
221
- "value": ["watchValueHandler"]
222
- }; }
223
- };
224
- ChSuggest.style = chSuggestCss;
225
-
226
- exports.ch_suggest = ChSuggest;
@@ -1,42 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-93a6a7e0.js');
6
- const store = require('./store-49485138.js');
7
- const form = require('./form-c5e161c6.js');
8
- const classesNames = require('./classesNames-5b7c6ad4.js');
9
-
10
- const stylesCss = "@charset \"UTF-8\";: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}:host(.gxg-validation--warning) .form-element{border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus{outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}:host(.gxg-validation--warning) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-warning-dark)}:host(.gxg-validation--error) .form-element{border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus{outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}:host(.gxg-validation--error) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-error-dark)}:host(.gxg-validation--success) .form-element{border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus{outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}:host(.gxg-validation--success) .form-element:focus+.checkmark{--checkmark-border-color:var(--color-success-dark)}ch-suggest{font-family:var(--font-family-primary);font-size:var(--font-size-lg);color:var(--color-on-background);}ch-suggest::-webkit-scrollbar{width:6px;height:6px}ch-suggest::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}ch-suggest ::-webkit-scrollbar{width:6px;height:6px}ch-suggest ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(label){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;display:flex;align-items:center;cursor:default;font-size:inherit}ch-suggest[label-position=start]::part(label){margin-inline-end:var(--gxg-label-margin-horizontal)}ch-suggest[label-position=above]::part(label){margin-block-end:var(--gxg-label-margin-vertical)}ch-suggest::part(input){height:var(--spacing-comp-05);border:var(--border-width-sm) solid var(--gxg-border-color--regular);padding:var(--spacing-comp-01) var(--spacing-comp-02);box-sizing:border-box;background-color:var(--color-background)}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(input):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(header){display:block;padding-block-end:var(--spacing-comp-02);display:flex;justify-content:flex-end}ch-suggest::part(close-button){height:var(--spacing-comp-05);width:var(--spacing-comp-05);background-color:var(--color-background);color:var(--color-primary-hover);border:1px solid var(--color-primary-hover);box-sizing:border-box;cursor:pointer;display:block}ch-suggest::part(close-button):hover{background-color:var(--color-primary-hover-opacity-01)}ch-suggest::part(close-button)::after{content:\"✖\";width:100%;display:block;line-height:24px;text-align:center}ch-suggest::part(close-button):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest::part(dropdown){background-color:var(--color-background);margin-top:var(--spacing-comp-01);padding:var(--spacing-comp-02);box-shadow:var(--box-shadow-02);}ch-suggest::part(dropdown)::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown)::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown)::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}ch-suggest::part(dropdown) .gxg-scroll{display:block;overflow-y:auto;padding-right:2px}ch-suggest::part(dropdown) ::-webkit-scrollbar{width:6px;height:6px}ch-suggest::part(dropdown) ::-webkit-scrollbar-track{background-color:var(--gray-02);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb{background:var(--gray-05);border-radius:10px}ch-suggest::part(dropdown) ::-webkit-scrollbar-thumb:hover{background:var(--gray-04);cursor:pointer}.messages-wrapper{margin-top:var(--spacing-comp-02);display:flex;gap:var(--spacing-comp-01);flex-direction:column}gxg-suggest.gxg-validation--success ch-suggest::part(input){outline-color:var(--color-success-dark);border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--success ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-success-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input){outline-color:var(--color-warning-dark);border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--warning ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-warning-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input){outline-color:var(--color-error-dark);border-color:var(--color-error-dark)}gxg-suggest.gxg-validation--error ch-suggest::part(input)+.checkmark{--checkmark-border-color:var(--color-error-dark)}gxg-suggest.gxg--disabled ch-suggest{pointer-events:none}gxg-suggest.gxg--disabled ch-suggest::part(input){background-color:var(--gray-01);color:var(--color-on-disabled)}gxg-suggest[ellipsis]:not([ellipsis=false]) ch-suggest-list-item::part(content-wrapper){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}ch-suggest-list{margin:var(--spacing-comp-01) 0;font-family:inherit;border:var(--border-width-sm) solid var(--gxg-border-color--regular)}ch-suggest-list:first-child{margin-top:0}ch-suggest-list:last-child{margin-bottom:0}ch-suggest-list::part(title){text-transform:uppercase;font-weight:var(--font-weight-semibold);margin:var(--spacing-comp-01) 0 0 0;padding:var(--spacing-comp-01) var(--spacing-comp-02)}ch-suggest-list-item{}ch-suggest-list-item::part(button){padding:var(--spacing-comp-01) var(--spacing-comp-02);align-items:center;gap:var(--spacing-comp-01);box-sizing:border-box}ch-suggest-list-item::part(button):focus{outline-style:solid;outline-color:var(--color-primary-active);outline-width:var(--border-width-md);outline-offset:-2px}ch-suggest-list-item::part(description)::before{content:\" - \"}ch-suggest-list-item gxg-icon::part(ch-icon){--icon-size:16px;margin-right:2px}ch-suggest-list-item:hover{background-color:var(--gxg-background-color-item-hover)}";
11
-
12
- const GxgSuggest = class {
13
- constructor(hostRef) {
14
- index.registerInstance(this, hostRef);
15
- /* VALIDATION */
16
- /**
17
- * The validation status
18
- */
19
- this.validationStatus = "indeterminate";
20
- /**
21
- * The presence of this attribute makes the suggest disabled.
22
- */
23
- this.disabled = false;
24
- /**
25
- * The presence of this attribute forces the suggest list items to not wrap to a second line, and it will display ellipsis. (...)
26
- */
27
- this.ellipsis = true;
28
- }
29
- render() {
30
- return (index.h(index.Host, { class: {
31
- large: store.state.large,
32
- [classesNames.formClasses["VALIDATION_INDETERMINATE_CLASS"]]: this.validationStatus === "indeterminate",
33
- [classesNames.formClasses["VALIDATION_WARNING_CLASS"]]: this.validationStatus === "warning",
34
- [classesNames.formClasses["VALIDATION_ERROR_CLASS"]]: this.validationStatus === "error",
35
- [classesNames.formClasses["VALIDATION_SUCCESS_CLASS"]]: this.validationStatus === "success",
36
- [classesNames.commonClassesNames["DISABLED_CLASS"]]: this.disabled,
37
- } }, index.h("slot", null), form.formMessageLogic(this)));
38
- }
39
- };
40
- GxgSuggest.style = stylesCss;
41
-
42
- exports.gxg_suggest = GxgSuggest;
@@ -1,72 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const index = require('./index-93a6a7e0.js');
6
- const store = require('./store-49485138.js');
7
-
8
- const textCss = "/*! 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}:host{display:block;font-size:14px}:host p,:host q,:host a{display:block;margin:0;padding:0;margin:0 auto}:host([text-align=start]){text-align:start}:host([text-align=start]) *{text-align:start}:host([text-align=center]){text-align:center}:host([text-align=center]) *{text-align:center}:host([text-align=end]){text-align:end}:host([text-align=end]) *{text-align:end}:host([padding=s]){padding:var(--spacing-comp-01)}:host([padding=m]){padding:var(--spacing-comp-02)}:host(.large) .gxg-text,:host(.large) .gxg-text--gray,:host(.large) .gxg-quote,:host(.large) .gxg-link,:host(.large) .gxg-link-gray,:host(.large) .gxg-alert-error,:host(.large) .gxg-alert-warning,:host(.large) .gxg-alert-success{font-size:var(--font-size-lg)}";
9
-
10
- const GxgText = class {
11
- constructor(hostRef) {
12
- index.registerInstance(this, hostRef);
13
- /**
14
- * The target (for "link" or "link-gray" types
15
- * */
16
- this.target = "_self";
17
- /**
18
- * Text type
19
- */
20
- this.type = "text-regular";
21
- /**
22
- * Text alignment
23
- */
24
- this.textAlign = "start";
25
- /**
26
- * Text padding
27
- */
28
- this.padding = "none";
29
- /**
30
- * Max. width
31
- */
32
- this.maxWidth = "100%";
33
- }
34
- textType() {
35
- let text;
36
- switch (this.type) {
37
- case "text-regular":
38
- text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text" }, index.h("slot", null)));
39
- break;
40
- case "text-gray":
41
- text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text--gray" }, index.h("slot", null)));
42
- break;
43
- case "text-quote":
44
- text = (index.h("q", { style: { maxWidth: this.maxWidth }, class: "gxg-quote" }, index.h("slot", null)));
45
- break;
46
- case "text-link":
47
- text = (index.h("a", { style: { maxWidth: this.maxWidth }, href: this.href, target: this.target, class: "gxg-link" }, index.h("slot", null)));
48
- break;
49
- case "text-link-gray":
50
- text = (index.h("a", { style: { maxWidth: this.maxWidth }, href: this.href, target: this.target, class: "gxg-link-gray" }, index.h("slot", null)));
51
- break;
52
- case "text-alert-error":
53
- text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-error" }, index.h("slot", null)));
54
- break;
55
- case "text-alert-warning":
56
- text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-warning" }, index.h("slot", null)));
57
- break;
58
- case "text-alert-success":
59
- text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-alert-success" }, index.h("slot", null)));
60
- break;
61
- default:
62
- text = (index.h("p", { style: { maxWidth: this.maxWidth }, class: "gxg-text" }, index.h("slot", null)));
63
- }
64
- return text;
65
- }
66
- render() {
67
- return index.h(index.Host, { class: { large: store.state.large } }, this.textType(), " ");
68
- }
69
- };
70
- GxgText.style = textCss;
71
-
72
- exports.gxg_text = GxgText;