@enki-tek/fms-web-components 0.0.53 → 0.0.54

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 (8) hide show
  1. package/components/Button/Button.svelte +1 -1
  2. package/components/Button/Button.svelte.d.ts +2 -0
  3. package/components/TextField/TextField.svelte +1 -0
  4. package/components/TextField/TextField.svelte.d.ts +2 -0
  5. package/components/Tooltip/Tooltip.scss +15 -0
  6. package/components/Tooltip/Tooltip.svelte +30 -18
  7. package/components/Tooltip/Tooltip.svelte.d.ts +1 -0
  8. package/package.json +1 -1
package/components/Button/Button.svelte CHANGED
@@ -26,7 +26,7 @@
26
26
  }
27
27
  </script>
28
28
 
29
- <button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
29
+ <button {...$$restProps} {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
30
30
  <slot>
31
31
  {#if label}
32
32
  {label}
package/components/Button/Button.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} ButtonEvents */
3
3
  /** @typedef {typeof __propDef.slots} ButtonSlots */
4
4
  export default class Button extends SvelteComponentTyped<{
5
+ [x: string]: any;
5
6
  size?: string | undefined;
6
7
  disabled?: boolean | undefined;
7
8
  type?: string | undefined;
@@ -31,6 +32,7 @@ export type ButtonSlots = typeof __propDef.slots;
31
32
  import { SvelteComponentTyped } from "svelte";
32
33
  declare const __propDef: {
33
34
  props: {
35
+ [x: string]: any;
34
36
  size?: string | undefined;
35
37
  disabled?: boolean | undefined;
36
38
  type?: string | undefined;
package/components/TextField/TextField.svelte CHANGED
@@ -14,6 +14,7 @@
14
14
  </script>
15
15
 
16
16
  <Input
17
+ { ...$$restProps}
17
18
  {type}
18
19
  class="custom-field efs-normal {className}"
19
20
  {placeholder}
package/components/TextField/TextField.svelte.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} TextFieldEvents */
3
3
  /** @typedef {typeof __propDef.slots} TextFieldSlots */
4
4
  export default class TextField extends SvelteComponentTyped<{
5
+ [x: string]: any;
5
6
  size?: string | undefined;
6
7
  disabled?: boolean | undefined;
7
8
  invalid?: boolean | undefined;
@@ -27,6 +28,7 @@ export type TextFieldSlots = typeof __propDef.slots;
27
28
  import { SvelteComponentTyped } from "svelte";
28
29
  declare const __propDef: {
29
30
  props: {
31
+ [x: string]: any;
30
32
  size?: string | undefined;
31
33
  disabled?: boolean | undefined;
32
34
  invalid?: boolean | undefined;
package/components/Tooltip/Tooltip.scss CHANGED
@@ -8,6 +8,18 @@
8
8
  line-height: 22px;
9
9
  }
10
10
 
11
+ .align-left {
12
+ text-align: left;
13
+ }
14
+
15
+ .align-center {
16
+ text-align: center;
17
+ }
18
+
19
+ .align-right {
20
+ text-align: right;
21
+ }
22
+
11
23
  :global(.tooltip-inner) {
12
24
  background-color: $primary-dark;
13
25
  }
@@ -26,4 +38,7 @@
26
38
 
27
39
  :global(.tooltip.bs-tooltip-bottom .tooltip-arrow::before) {
28
40
  border-bottom-color: $primary-dark;
41
+ }
42
+ .tooltips{
43
+ text-align: left;
29
44
  }
package/components/Tooltip/Tooltip.svelte CHANGED
@@ -3,26 +3,26 @@ export let target = " ";
3
3
  export let placement = "right";
4
4
  export let delay = 500;
5
5
  export let label = "";
6
+ export let textAlignment = "left";
7
+ const textAligns = {
8
+ left: "align-left",
9
+ right: "align-right",
10
+ center: "align-center"
11
+ };
6
12
  </script>
7
13
 
8
- <div>
9
- {#if target==="btn-right-html"}
10
- <Button id="btn-right-html">HTML right</Button>
11
- {/if}
12
-
13
- <div class="tooltips">
14
- <Tooltip class='custom-tooltip' target={target} placement={placement} delay={delay} {...$$restProps}>
15
- <div class="label">
16
- <slot>
17
- {#if label}
18
- {label}
19
- {:else}
20
- <slot/>
21
- {/if}
22
- </slot>
23
- </div>
24
- </Tooltip>
25
- </div>
14
+ <div class="tooltips">
15
+ <Tooltip class="custom-tooltip" {target} {placement} {delay} {...$$restProps}>
16
+ <div class="label {textAligns.hasOwnProperty(textAlignment) ? textAligns[textAlignment] : ''}">
17
+ <slot>
18
+ {#if label}
19
+ {label}
20
+ {:else}
21
+ <slot />
22
+ {/if}
23
+ </slot>
24
+ </div>
25
+ </Tooltip>
26
26
  </div>
27
27
 
28
28
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -605,6 +605,15 @@ export let label = "";
605
605
  font-size: 16px;
606
606
  line-height: 22px;
607
607
  }
608
+ .align-left {
609
+ text-align: left;
610
+ }
611
+ .align-center {
612
+ text-align: center;
613
+ }
614
+ .align-right {
615
+ text-align: right;
616
+ }
608
617
  :global(.tooltip-inner) {
609
618
  background-color: #007FD8;
610
619
  }
@@ -619,4 +628,7 @@ export let label = "";
619
628
  }
620
629
  :global(.tooltip.bs-tooltip-bottom .tooltip-arrow::before) {
621
630
  border-bottom-color: #007FD8;
631
+ }
632
+ .tooltips {
633
+ text-align: left;
622
634
  }</style>
package/components/Tooltip/Tooltip.svelte.d.ts CHANGED
@@ -6,6 +6,7 @@ declare const __propDef: {
6
6
  placement?: string | undefined;
7
7
  delay?: number | undefined;
8
8
  label?: string | undefined;
9
+ textAlignment?: string | undefined;
9
10
  };
10
11
  events: {
11
12
  [evt: string]: CustomEvent<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.0.53",
3
+ "version": "0.0.54",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",