@bexis2/bexis2-core-ui 0.2.28 → 0.2.30

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 (98) hide show
  1. package/README.md +21 -2
  2. package/dist/TableView.svelte +1 -1
  3. package/dist/components/{file → File}/FileIcon.svelte +45 -45
  4. package/{src/lib/components/file → dist/components/File}/FileInfo.svelte +13 -13
  5. package/dist/components/ListView.svelte +5 -5
  6. package/dist/components/Table/Table.svelte +17 -2
  7. package/dist/components/Table/TableFilter.svelte +13 -6
  8. package/dist/components/form/Checkbox.svelte +13 -13
  9. package/dist/components/form/CheckboxKvPList.svelte +16 -16
  10. package/dist/components/form/CheckboxList.svelte +10 -10
  11. package/dist/components/form/DateInput.svelte +15 -13
  12. package/dist/components/form/DateInput.svelte.d.ts +1 -0
  13. package/dist/components/form/DropdownKvP.svelte +54 -54
  14. package/dist/components/form/MultiSelect.svelte +181 -181
  15. package/dist/components/form/NumberInput.svelte +16 -14
  16. package/dist/components/form/NumberInput.svelte.d.ts +1 -0
  17. package/dist/components/form/TextArea.svelte +15 -13
  18. package/dist/components/form/TextArea.svelte.d.ts +1 -0
  19. package/dist/components/form/TextInput.svelte +16 -14
  20. package/dist/components/form/TextInput.svelte.d.ts +1 -0
  21. package/dist/components/page/Alert.svelte +28 -28
  22. package/dist/components/page/BackToTop.svelte +30 -30
  23. package/dist/components/page/Docs.svelte +22 -22
  24. package/dist/components/page/ErrorMessage.svelte +8 -8
  25. package/dist/components/page/Footer.svelte +5 -5
  26. package/dist/components/page/Header.svelte +5 -5
  27. package/dist/components/page/HelpPopUp.svelte +30 -30
  28. package/dist/components/page/PageCaller.js +19 -19
  29. package/dist/components/page/Spinner.svelte +14 -14
  30. package/dist/components/page/breadcrumb/Breadcrumb.svelte +19 -19
  31. package/dist/components/page/menu/MenuDataCaller.js +10 -10
  32. package/dist/css/core.ui.postcss +17 -17
  33. package/dist/css/themes/theme-bexis2.css +96 -96
  34. package/dist/css/themes/theme-crimson.css +101 -101
  35. package/dist/css/themes/theme-gold-nouveau.css +140 -140
  36. package/dist/css/themes/theme-hamlindigo.css +112 -112
  37. package/dist/css/themes/theme-modern.css +127 -127
  38. package/dist/css/themes/theme-rocket.css +119 -119
  39. package/dist/css/themes/theme-sahara.css +128 -128
  40. package/dist/css/themes/theme-seafoam.css +122 -122
  41. package/dist/css/themes/theme-seasonal.css +115 -115
  42. package/dist/css/themes/theme-skeleton.css +118 -118
  43. package/dist/css/themes/theme-vintage.css +125 -125
  44. package/dist/index.d.ts +3 -3
  45. package/dist/index.js +3 -3
  46. package/dist/models/Models.d.ts +3 -3
  47. package/dist/services/BaseCaller.js +16 -16
  48. package/package.json +1 -1
  49. package/src/lib/TableView.svelte +1 -1
  50. package/src/lib/components/{file → File}/FileIcon.svelte +45 -45
  51. package/{dist/components/file → src/lib/components/File}/FileInfo.svelte +13 -13
  52. package/src/lib/components/ListView.svelte +11 -11
  53. package/src/lib/components/Table/Table.svelte +19 -3
  54. package/src/lib/components/Table/TableFilter.svelte +15 -6
  55. package/src/lib/components/Table/filter.ts +141 -141
  56. package/src/lib/components/form/Checkbox.svelte +24 -24
  57. package/src/lib/components/form/CheckboxKvPList.svelte +29 -29
  58. package/src/lib/components/form/CheckboxList.svelte +21 -21
  59. package/src/lib/components/form/DateInput.svelte +27 -25
  60. package/src/lib/components/form/DropdownKvP.svelte +54 -54
  61. package/src/lib/components/form/MultiSelect.svelte +181 -181
  62. package/src/lib/components/form/NumberInput.svelte +30 -28
  63. package/src/lib/components/form/TextArea.svelte +28 -26
  64. package/src/lib/components/form/TextInput.svelte +28 -26
  65. package/src/lib/components/page/Alert.svelte +41 -41
  66. package/src/lib/components/page/BackToTop.svelte +30 -30
  67. package/src/lib/components/page/Docs.svelte +46 -46
  68. package/src/lib/components/page/ErrorMessage.svelte +10 -10
  69. package/src/lib/components/page/Footer.svelte +18 -18
  70. package/src/lib/components/page/Header.svelte +18 -18
  71. package/src/lib/components/page/HelpPopUp.svelte +72 -72
  72. package/src/lib/components/page/PageCaller.js +19 -19
  73. package/src/lib/components/page/Spinner.svelte +20 -20
  74. package/src/lib/components/page/breadcrumb/Breadcrumb.svelte +39 -39
  75. package/src/lib/components/page/menu/MenuDataCaller.js +10 -10
  76. package/src/lib/css/core.ui.postcss +17 -17
  77. package/src/lib/css/themes/theme-bexis2.css +96 -96
  78. package/src/lib/css/themes/theme-crimson.css +101 -101
  79. package/src/lib/css/themes/theme-gold-nouveau.css +140 -140
  80. package/src/lib/css/themes/theme-hamlindigo.css +112 -112
  81. package/src/lib/css/themes/theme-modern.css +127 -127
  82. package/src/lib/css/themes/theme-rocket.css +119 -119
  83. package/src/lib/css/themes/theme-sahara.css +128 -128
  84. package/src/lib/css/themes/theme-seafoam.css +122 -122
  85. package/src/lib/css/themes/theme-seasonal.css +115 -115
  86. package/src/lib/css/themes/theme-skeleton.css +118 -118
  87. package/src/lib/css/themes/theme-vintage.css +125 -125
  88. package/src/lib/index.ts +3 -3
  89. package/src/lib/models/Models.ts +3 -3
  90. package/src/lib/models/Page.ts +40 -40
  91. package/src/lib/services/Api.ts +55 -55
  92. package/src/lib/services/BaseCaller.js +16 -16
  93. package/src/lib/stores/apiStores.ts +31 -31
  94. /package/dist/components/{file → File}/FileIcon.svelte.d.ts +0 -0
  95. /package/dist/components/{file → File}/FileInfo.svelte.d.ts +0 -0
  96. /package/dist/components/{file → File}/FileUploader.svelte +0 -0
  97. /package/dist/components/{file → File}/FileUploader.svelte.d.ts +0 -0
  98. /package/src/lib/components/{file → File}/FileUploader.svelte +0 -0
@@ -1,181 +1,181 @@
1
- <script>
2
- import InputContainer from './InputContainer.svelte';
3
-
4
- import Select from 'svelte-select';
5
- import { onMount } from 'svelte';
6
-
7
- export let source;
8
- export let target;
9
- export let id;
10
- export let title;
11
- export let itemId = 'value';
12
- export let itemLabel = 'label';
13
- export let itemGroup = 'group';
14
- export let isMulti = true;
15
- export let complexSource = false;
16
- export let complexTarget = false;
17
- export let required = false;
18
- export let feedback = [''];
19
- export let placeholder = '-- Please select --';
20
- export let invalid = false;
21
- export let loading = false;
22
- export let help = false;
23
- export let clearable = true;
24
- export let disabled = false;
25
-
26
-
27
- let isLoaded = false;
28
-
29
- $: value = null;
30
- $: updateTarget(value);
31
- $: target, setValue(target);
32
-
33
- let groupBy;
34
- $: groupBy;
35
-
36
- function updateTarget(selection) {
37
- //console.log("UPDATE target",selection);
38
- //different cases
39
- //a) source is complex model is simple return array
40
- if (complexSource && !complexTarget && isLoaded && isMulti) {
41
- //console.log('a) source is complex model is simple');
42
-
43
- target = [];
44
- for (let i in selection) {
45
- let item = selection[i];
46
- target.push(item[itemId]);
47
- }
48
- }
49
-
50
- if (!complexSource && !complexTarget && isLoaded && isMulti) {
51
- target = [];
52
-
53
- for (let i in selection) {
54
- target.push(selection[i].value);
55
- }
56
- }
57
-
58
- if (complexSource && complexTarget && isLoaded && isMulti) {
59
- //console.log("both complex",selection);
60
- target = selection;
61
- }
62
-
63
- if (complexSource && complexTarget && isLoaded && !isMulti) {
64
- target = selection;
65
- }
66
-
67
- if (!complexSource && !complexTarget && isLoaded && !isMulti) {
68
- target = selection.value;
69
- }
70
-
71
- if (complexSource && !complexTarget && isLoaded && !isMulti) {
72
- target = selection[itemLabel];
73
- //console.log('selection', selection);
74
- }
75
-
76
- //console.log('selection ' + title, selection);
77
- //console.log('target ' + title, target);
78
- }
79
-
80
- onMount(async () => {
81
- //console.log("OnMount", target)
82
- if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
83
- {
84
- setValue(target);
85
- }
86
- });
87
-
88
- function setValue(t) {
89
- //console.log("Set Value",t);
90
- //a) source is complex model is simple
91
- if (complexSource && !complexTarget && isMulti) {
92
- let items = [];
93
- // event.detail will be null unless isMulti is true and user has removed a single item
94
- for (let i in t) {
95
- let t = target[i];
96
- items.push(source.find((item) => item[itemId] === t));
97
- }
98
-
99
- isLoaded = true;
100
- if (items.length > 0) {
101
- value = items;
102
- }
103
- ////console.log(value);
104
- groupBy = (item) => item[itemGroup];
105
- }
106
-
107
- if (complexSource && complexTarget && isMulti) {
108
- value = t;
109
- isLoaded = true;
110
- groupBy = (item) => item[itemGroup];
111
- }
112
-
113
- //b) simple liust and simple model
114
- if (!complexSource && !complexTarget && isMulti) {
115
- //console.log('b) simple liust and simple model');
116
- //console.log('source', source);
117
- //console.log("target",t);
118
- isLoaded = true;
119
- //set target only if its nit empty
120
- if (t != null && t !== undefined && t != '') {
121
- //console.log('target', t);
122
- value = t;
123
- }
124
- }
125
-
126
- if (!isMulti) {
127
- //console.log("onmount",complexSource,complexTarget,value,target)
128
- if (!complexSource && !complexTarget) {
129
- value = {
130
- value: t,
131
- label: t
132
- };
133
- }
134
-
135
- if (complexSource && complexTarget) {
136
- value = t;
137
- groupBy = (item) => item[itemGroup];
138
- }
139
-
140
- if (complexSource && !complexTarget) {
141
- //value = target
142
- console.log(
143
- 'this case is currently not supported (complexSource,complexTarget,isMulti)',
144
- complexSource,
145
- complexTarget,
146
- isMulti
147
- );
148
- }
149
-
150
- isLoaded = true;
151
- }
152
-
153
- //console.log(t,value)
154
- }
155
- </script>
156
-
157
- <InputContainer {id} label={title} {feedback} {required} {help}>
158
- <Select
159
- {id}
160
- items={source}
161
- {groupBy}
162
- {itemId}
163
- label={itemLabel}
164
- multiple={isMulti}
165
- bind:value
166
- {placeholder}
167
- hasError={invalid}
168
- {loading}
169
- {clearable}
170
- {disabled}
171
- on:change
172
- on:input
173
- on:focus
174
- on:blur
175
- on:clear
176
- on:loaded
177
- on:error
178
- on:filter
179
- on:hoverItem
180
- />
181
- </InputContainer>
1
+ <script>
2
+ import InputContainer from './InputContainer.svelte';
3
+
4
+ import Select from 'svelte-select';
5
+ import { onMount } from 'svelte';
6
+
7
+ export let source;
8
+ export let target;
9
+ export let id;
10
+ export let title;
11
+ export let itemId = 'value';
12
+ export let itemLabel = 'label';
13
+ export let itemGroup = 'group';
14
+ export let isMulti = true;
15
+ export let complexSource = false;
16
+ export let complexTarget = false;
17
+ export let required = false;
18
+ export let feedback = [''];
19
+ export let placeholder = '-- Please select --';
20
+ export let invalid = false;
21
+ export let loading = false;
22
+ export let help = false;
23
+ export let clearable = true;
24
+ export let disabled = false;
25
+
26
+
27
+ let isLoaded = false;
28
+
29
+ $: value = null;
30
+ $: updateTarget(value);
31
+ $: target, setValue(target);
32
+
33
+ let groupBy;
34
+ $: groupBy;
35
+
36
+ function updateTarget(selection) {
37
+ //console.log("UPDATE target",selection);
38
+ //different cases
39
+ //a) source is complex model is simple return array
40
+ if (complexSource && !complexTarget && isLoaded && isMulti) {
41
+ //console.log('a) source is complex model is simple');
42
+
43
+ target = [];
44
+ for (let i in selection) {
45
+ let item = selection[i];
46
+ target.push(item[itemId]);
47
+ }
48
+ }
49
+
50
+ if (!complexSource && !complexTarget && isLoaded && isMulti) {
51
+ target = [];
52
+
53
+ for (let i in selection) {
54
+ target.push(selection[i].value);
55
+ }
56
+ }
57
+
58
+ if (complexSource && complexTarget && isLoaded && isMulti) {
59
+ //console.log("both complex",selection);
60
+ target = selection;
61
+ }
62
+
63
+ if (complexSource && complexTarget && isLoaded && !isMulti) {
64
+ target = selection;
65
+ }
66
+
67
+ if (!complexSource && !complexTarget && isLoaded && !isMulti) {
68
+ target = selection.value;
69
+ }
70
+
71
+ if (complexSource && !complexTarget && isLoaded && !isMulti) {
72
+ target = selection[itemLabel];
73
+ //console.log('selection', selection);
74
+ }
75
+
76
+ //console.log('selection ' + title, selection);
77
+ //console.log('target ' + title, target);
78
+ }
79
+
80
+ onMount(async () => {
81
+ //console.log("OnMount", target)
82
+ if(complexSource && complexTarget) // after on mount a setValue is needed when data is complex
83
+ {
84
+ setValue(target);
85
+ }
86
+ });
87
+
88
+ function setValue(t) {
89
+ //console.log("Set Value",t);
90
+ //a) source is complex model is simple
91
+ if (complexSource && !complexTarget && isMulti) {
92
+ let items = [];
93
+ // event.detail will be null unless isMulti is true and user has removed a single item
94
+ for (let i in t) {
95
+ let t = target[i];
96
+ items.push(source.find((item) => item[itemId] === t));
97
+ }
98
+
99
+ isLoaded = true;
100
+ if (items.length > 0) {
101
+ value = items;
102
+ }
103
+ ////console.log(value);
104
+ groupBy = (item) => item[itemGroup];
105
+ }
106
+
107
+ if (complexSource && complexTarget && isMulti) {
108
+ value = t;
109
+ isLoaded = true;
110
+ groupBy = (item) => item[itemGroup];
111
+ }
112
+
113
+ //b) simple liust and simple model
114
+ if (!complexSource && !complexTarget && isMulti) {
115
+ //console.log('b) simple liust and simple model');
116
+ //console.log('source', source);
117
+ //console.log("target",t);
118
+ isLoaded = true;
119
+ //set target only if its nit empty
120
+ if (t != null && t !== undefined && t != '') {
121
+ //console.log('target', t);
122
+ value = t;
123
+ }
124
+ }
125
+
126
+ if (!isMulti) {
127
+ //console.log("onmount",complexSource,complexTarget,value,target)
128
+ if (!complexSource && !complexTarget) {
129
+ value = {
130
+ value: t,
131
+ label: t
132
+ };
133
+ }
134
+
135
+ if (complexSource && complexTarget) {
136
+ value = t;
137
+ groupBy = (item) => item[itemGroup];
138
+ }
139
+
140
+ if (complexSource && !complexTarget) {
141
+ //value = target
142
+ console.log(
143
+ 'this case is currently not supported (complexSource,complexTarget,isMulti)',
144
+ complexSource,
145
+ complexTarget,
146
+ isMulti
147
+ );
148
+ }
149
+
150
+ isLoaded = true;
151
+ }
152
+
153
+ //console.log(t,value)
154
+ }
155
+ </script>
156
+
157
+ <InputContainer {id} label={title} {feedback} {required} {help}>
158
+ <Select
159
+ {id}
160
+ items={source}
161
+ {groupBy}
162
+ {itemId}
163
+ label={itemLabel}
164
+ multiple={isMulti}
165
+ bind:value
166
+ {placeholder}
167
+ hasError={invalid}
168
+ {loading}
169
+ {clearable}
170
+ {disabled}
171
+ on:change
172
+ on:input
173
+ on:focus
174
+ on:blur
175
+ on:clear
176
+ on:loaded
177
+ on:error
178
+ on:filter
179
+ on:hoverItem
180
+ />
181
+ </InputContainer>
@@ -9,17 +9,19 @@ export let required = false;
9
9
  export let feedback = [""];
10
10
  export let placeholder = "";
11
11
  export let help = false;
12
- </script>
13
-
14
- <InputContainer {id} {label} {feedback} {required} {help}>
15
- <input
16
- {id}
17
- class="input variant-form-material"
18
- type="number"
19
- class:input-success={valid}
20
- class:input-error={invalid}
21
- bind:value
22
- on:input
23
- {placeholder}
24
- />
25
- </InputContainer>
12
+ export let disabled = false;
13
+ </script>
14
+
15
+ <InputContainer {id} {label} {feedback} {required} {help}>
16
+ <input
17
+ {id}
18
+ class="input variant-form-material"
19
+ type="number"
20
+ class:input-success={valid}
21
+ class:input-error={invalid}
22
+ bind:value
23
+ on:input
24
+ {placeholder}
25
+ {disabled}
26
+ />
27
+ </InputContainer>
@@ -10,6 +10,7 @@ declare const __propDef: {
10
10
  feedback?: string[] | undefined;
11
11
  placeholder?: string | undefined;
12
12
  help?: boolean | undefined;
13
+ disabled?: boolean | undefined;
13
14
  };
14
15
  events: {
15
16
  input: Event;
@@ -8,16 +8,18 @@ export let required = false;
8
8
  export let feedback = [""];
9
9
  export let placeholder = "";
10
10
  export let help = false;
11
- </script>
12
-
13
- <InputContainer {id} {label} {feedback} {required} {help}>
14
- <textarea
15
- {id}
16
- class="textarea variant-form-material"
17
- class:input-success={valid}
18
- class:input-error={invalid}
19
- bind:value
20
- on:input
21
- {placeholder}
22
- />
23
- </InputContainer>
11
+ export let disabled = false;
12
+ </script>
13
+
14
+ <InputContainer {id} {label} {feedback} {required} {help}>
15
+ <textarea
16
+ {id}
17
+ class="textarea variant-form-material"
18
+ class:input-success={valid}
19
+ class:input-error={invalid}
20
+ bind:value
21
+ on:input
22
+ {placeholder}
23
+ {disabled}
24
+ />
25
+ </InputContainer>
@@ -10,6 +10,7 @@ declare const __propDef: {
10
10
  feedback?: string[] | undefined;
11
11
  placeholder?: string | undefined;
12
12
  help?: boolean | undefined;
13
+ disabled?: boolean | undefined;
13
14
  };
14
15
  events: {
15
16
  input: Event;
@@ -8,17 +8,19 @@ export let required = false;
8
8
  export let feedback = [""];
9
9
  export let placeholder = "";
10
10
  export let help = false;
11
- </script>
12
-
13
- <InputContainer {id} {label} {feedback} {required} {help}>
14
- <input
15
- {id}
16
- class="input variant-form-material"
17
- type="text"
18
- class:input-success={valid}
19
- class:input-error={invalid}
20
- bind:value
21
- on:input
22
- {placeholder}
23
- />
24
- </InputContainer>
11
+ export let disabled = false;
12
+ </script>
13
+
14
+ <InputContainer {id} {label} {feedback} {required} {help}>
15
+ <input
16
+ {id}
17
+ class="input variant-form-material"
18
+ type="text"
19
+ class:input-success={valid}
20
+ class:input-error={invalid}
21
+ bind:value
22
+ on:input
23
+ {placeholder}
24
+ {disabled}
25
+ />
26
+ </InputContainer>
@@ -10,6 +10,7 @@ declare const __propDef: {
10
10
  feedback?: string[] | undefined;
11
11
  placeholder?: string | undefined;
12
12
  help?: boolean | undefined;
13
+ disabled?: boolean | undefined;
13
14
  };
14
15
  events: {
15
16
  input: Event;
@@ -7,31 +7,31 @@ export let cssClass = "";
7
7
  export let deleteBtn = true;
8
8
  $:
9
9
  show = true;
10
- </script>
11
-
12
- {#if show}
13
- <aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
14
- <!-- Icon -->
15
- <!-- <div>(icon)</div> -->
16
- <!-- Message -->
17
- <div class="alert-message">
18
- {#if title}
19
- <h3 class="h3">{title}</h3>
20
- {/if}
21
- <p>
22
- {message}
23
- <slot />
24
- </p>
25
- </div>
26
- <!-- Actions -->
27
- <div class="alert-actions">
28
- <slot name="actions" />
29
-
30
- {#if deleteBtn}
31
- <button class="btn hover:text-primary-100" on:click={() => (show = false)}>
32
- <Fa icon={faXmark} />
33
- </button>
34
- {/if}
35
- </div>
36
- </aside>
37
- {/if}
10
+ </script>
11
+
12
+ {#if show}
13
+ <aside class="alert {cssClass}" transition:fade|local={{ duration: 100 }}>
14
+ <!-- Icon -->
15
+ <!-- <div>(icon)</div> -->
16
+ <!-- Message -->
17
+ <div class="alert-message">
18
+ {#if title}
19
+ <h3 class="h3">{title}</h3>
20
+ {/if}
21
+ <p>
22
+ {message}
23
+ <slot />
24
+ </p>
25
+ </div>
26
+ <!-- Actions -->
27
+ <div class="alert-actions">
28
+ <slot name="actions" />
29
+
30
+ {#if deleteBtn}
31
+ <button class="btn hover:text-primary-100" on:click={() => (show = false)}>
32
+ <Fa icon={faXmark} />
33
+ </button>
34
+ {/if}
35
+ </div>
36
+ </aside>
37
+ {/if}
@@ -1,30 +1,30 @@
1
- <script>
2
- export let showOnPx = 150;
3
- let hidden = true;
4
-
5
- function goTop() {
6
- document.body.scrollIntoView();
7
- }
8
-
9
- function scrollContainer() {
10
- return document.documentElement || document.body;
11
- }
12
-
13
- function handleOnScroll() {
14
- if (!scrollContainer()) {
15
- return;
16
- }
17
-
18
- if (scrollContainer().scrollTop > showOnPx) {
19
- hidden = false;
20
- } else {
21
- hidden = true;
22
- }
23
- }
24
- </script>
25
-
26
- <svelte:window on:scroll={handleOnScroll} />
27
-
28
- <div class="w-full items-center">
29
- <button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
30
- </div>
1
+ <script>
2
+ export let showOnPx = 150;
3
+ let hidden = true;
4
+
5
+ function goTop() {
6
+ document.body.scrollIntoView();
7
+ }
8
+
9
+ function scrollContainer() {
10
+ return document.documentElement || document.body;
11
+ }
12
+
13
+ function handleOnScroll() {
14
+ if (!scrollContainer()) {
15
+ return;
16
+ }
17
+
18
+ if (scrollContainer().scrollTop > showOnPx) {
19
+ hidden = false;
20
+ } else {
21
+ hidden = true;
22
+ }
23
+ }
24
+ </script>
25
+
26
+ <svelte:window on:scroll={handleOnScroll} />
27
+
28
+ <div class="w-full items-center">
29
+ <button class="btn ring back-to-top" on:click={goTop} class:hidden>Back to top</button>
30
+ </div>
@@ -12,25 +12,25 @@ const noteSettings = {
12
12
  target: "noteTarget",
13
13
  placement: "bottom"
14
14
  };
15
- </script>
16
-
17
- <div class="text-right p-2">
18
- {#if note}
19
- <span class="chip variant-soft hover:variant-filled" use:popup={noteSettings}>
20
- <span><Fa icon={faQuestion} /></span>
21
- </span>
22
-
23
- <div
24
- class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md"
25
- data-popup="noteTarget"
26
- >
27
- {note}
28
- </div>
29
- {/if}
30
-
31
- {#each links as link}
32
- <span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
33
- <span>{link.label}</span>
34
- </span>
35
- {/each}
36
- </div>
15
+ </script>
16
+
17
+ <div class="text-right p-2">
18
+ {#if note}
19
+ <span class="chip variant-soft hover:variant-filled" use:popup={noteSettings}>
20
+ <span><Fa icon={faQuestion} /></span>
21
+ </span>
22
+
23
+ <div
24
+ class="card p-4 variant-filled-primary w-60 z-50 text-left shadow-md"
25
+ data-popup="noteTarget"
26
+ >
27
+ {note}
28
+ </div>
29
+ {/if}
30
+
31
+ {#each links as link}
32
+ <span class="chip variant-soft hover:variant-filled" on:click={() => goTo(link.url, false)}>
33
+ <span>{link.label}</span>
34
+ </span>
35
+ {/each}
36
+ </div>