do-ui-design-system 1.0.7 → 1.0.8

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 (33) hide show
  1. package/dist/atoms/Badge/Badge.svelte +27 -0
  2. package/dist/atoms/Badge/Badge.svelte.d.ts +43 -0
  3. package/dist/atoms/Badge/Badge.svelte.d.ts.map +1 -0
  4. package/dist/atoms/Badge/iProps.d.ts +6 -0
  5. package/dist/atoms/Badge/iProps.d.ts.map +1 -0
  6. package/dist/atoms/Badge/iProps.js +1 -0
  7. package/dist/atoms/Counter/Counter.svelte +28 -0
  8. package/dist/atoms/Counter/Counter.svelte.d.ts +42 -0
  9. package/dist/atoms/Counter/Counter.svelte.d.ts.map +1 -0
  10. package/dist/atoms/Counter/iProps.d.ts +5 -0
  11. package/dist/atoms/Counter/iProps.d.ts.map +1 -0
  12. package/dist/atoms/Counter/iProps.js +1 -0
  13. package/dist/atoms/index.d.ts +3 -1
  14. package/dist/atoms/index.d.ts.map +1 -1
  15. package/dist/atoms/index.js +3 -1
  16. package/dist/do-theme/badge.css +26 -0
  17. package/dist/do-theme/counter.css +46 -0
  18. package/dist/do-theme/index.css +2 -0
  19. package/dist/do-theme/var-dark.css +11 -0
  20. package/dist/do-theme/var-light.css +11 -0
  21. package/dist/index.d.ts +3 -3
  22. package/dist/index.d.ts.map +1 -1
  23. package/dist/index.js +3 -3
  24. package/dist/molecules/CounterBadge/CounterBadge.svelte +29 -0
  25. package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts +47 -0
  26. package/dist/molecules/CounterBadge/CounterBadge.svelte.d.ts.map +1 -0
  27. package/dist/molecules/CounterBadge/iProps.d.ts +8 -0
  28. package/dist/molecules/CounterBadge/iProps.d.ts.map +1 -0
  29. package/dist/molecules/CounterBadge/iProps.js +1 -0
  30. package/dist/molecules/index.d.ts +2 -2
  31. package/dist/molecules/index.d.ts.map +1 -1
  32. package/dist/molecules/index.js +3 -2
  33. package/package.json +1 -1
@@ -0,0 +1,27 @@
1
+ <script lang="ts">
2
+ export let label: string = 'Texto';
3
+ export let maxLength: number | null = null;
4
+ export let customClass: string = '';
5
+
6
+ $: displayedText =
7
+ maxLength && label.length > maxLength ? label.slice(0, maxLength) + '…' : label;
8
+ $: isTruncated = maxLength && label.length > maxLength;
9
+ </script>
10
+ <!-- @component Badge
11
+ ```Svelte
12
+ <Badge label={label} maxLength={maxLength} customClass={customClass}>
13
+ <slot />
14
+ </Badge>
15
+ ```
16
+ - `label?`: string
17
+ - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
18
+ - `customClass?`: string - additional custom class for styling
19
+
20
+ -->
21
+
22
+ <div class={`do-badge do-badge-primary ${customClass}`} {...isTruncated ? { title: label } : {}}>
23
+ <span>
24
+ {displayedText}
25
+ </span>
26
+ <slot />
27
+ </div>
@@ -0,0 +1,43 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
15
+ default: any;
16
+ } ? Props extends Record<string, never> ? any : {
17
+ children?: any;
18
+ } : {});
19
+ /**
20
+ * Badge
21
+ * ```Svelte
22
+ * <Badge label={label} maxLength={maxLength} customClass={customClass}>
23
+ * <slot />
24
+ * </Badge>
25
+ * ```
26
+ * - `label?`: string
27
+ * - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
28
+ * - `customClass?`: string - additional custom class for styling
29
+ */
30
+ declare const Badge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
31
+ label?: string;
32
+ maxLength?: number | null;
33
+ customClass?: string;
34
+ }, {
35
+ default: {};
36
+ }>, {
37
+ [evt: string]: CustomEvent<any>;
38
+ }, {
39
+ default: {};
40
+ }, {}, string>;
41
+ type Badge = InstanceType<typeof Badge>;
42
+ export default Badge;
43
+ //# sourceMappingURL=Badge.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAuBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;GAUG;AACH,QAAA,MAAM,KAAK;YA1BkF,MAAM;gBAAc,MAAM,GAAG,IAAI;kBAAgB,MAAM;;;;;;;cA0BpD,CAAC;AAC/E,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
@@ -0,0 +1,6 @@
1
+ export interface iProps {
2
+ label: string;
3
+ maxLength: number | null | undefined;
4
+ customClass?: string;
5
+ }
6
+ //# sourceMappingURL=iProps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Badge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB"}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,28 @@
1
+ <script lang="ts">
2
+ export let label: string = '10';
3
+ export let tooltipContent: boolean = false;
4
+ </script>
5
+
6
+ <!-- @component Counter
7
+ ```Svelte
8
+ <Counter label={label} tooltipContent={tooltipContent}>
9
+ <slot />
10
+ </Counter>
11
+ ```
12
+ - `label?`: string
13
+ - `tooltipContent?`: boolean
14
+ - *If `tooltipContent` is true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
15
+
16
+ -->
17
+
18
+ <div class="do-counter-wrapper">
19
+ <div class="do-counter do-counter-primary">
20
+ <span>{label}</span>
21
+ </div>
22
+
23
+ {#if tooltipContent}
24
+ <div class="do-counter-tooltip">
25
+ <slot />
26
+ </div>
27
+ {/if}
28
+ </div>
@@ -0,0 +1,42 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
15
+ default: any;
16
+ } ? Props extends Record<string, never> ? any : {
17
+ children?: any;
18
+ } : {});
19
+ /**
20
+ * Counter
21
+ * ```Svelte
22
+ * <Counter label={label} tooltipContent={tooltipContent}>
23
+ * <slot />
24
+ * </Counter>
25
+ * ```
26
+ * - `label?`: string
27
+ * - `tooltipContent?`: boolean
28
+ * - *If `tooltipContent` is true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
29
+ */
30
+ declare const Counter: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
31
+ label?: string;
32
+ tooltipContent?: boolean;
33
+ }, {
34
+ default: {};
35
+ }>, {
36
+ [evt: string]: CustomEvent<any>;
37
+ }, {
38
+ default: {};
39
+ }, {}, string>;
40
+ type Counter = InstanceType<typeof Counter>;
41
+ export default Counter;
42
+ //# sourceMappingURL=Counter.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Counter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Counter/Counter.svelte.ts"],"names":[],"mappings":"AAwBA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;GAUG;AACH,QAAA,MAAM,OAAO;YA1B+D,MAAM;qBAAmB,OAAO;;;;;;;cA0BV,CAAC;AACjF,KAAK,OAAO,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAC;AAC9C,eAAe,OAAO,CAAC"}
@@ -0,0 +1,5 @@
1
+ export interface iProps {
2
+ label: string;
3
+ tooltipContent?: boolean;
4
+ }
5
+ //# sourceMappingURL=iProps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/atoms/Counter/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;CACzB"}
@@ -0,0 +1 @@
1
+ export {};
@@ -1,4 +1,6 @@
1
1
  import Button from "./Button/Button.svelte";
2
2
  import Icon from "./Icons/Icon.svelte";
3
- export { Button, Icon };
3
+ import Badge from "./Badge/Badge.svelte";
4
+ import Counter from "./Counter/Counter.svelte";
5
+ export { Button, Icon, Badge, Counter };
4
6
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,qBAAqB,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/atoms/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,wBAAwB,CAAC;AAC5C,OAAO,IAAI,MAAM,qBAAqB,CAAC;AACvC,OAAO,KAAK,MAAM,sBAAsB,CAAC;AACzC,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAE/C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC"}
@@ -1,3 +1,5 @@
1
1
  import Button from "./Button/Button.svelte";
2
2
  import Icon from "./Icons/Icon.svelte";
3
- export { Button, Icon };
3
+ import Badge from "./Badge/Badge.svelte";
4
+ import Counter from "./Counter/Counter.svelte";
5
+ export { Button, Icon, Badge, Counter };
@@ -0,0 +1,26 @@
1
+ .do-badge {
2
+ display: inline-flex;
3
+ padding: 6px 10px;
4
+ justify-content: center;
5
+ align-items: center;
6
+ border: 1px solid;
7
+ gap: 4px;
8
+ border-radius: 24px;
9
+ font-size: 12px;
10
+ font-style: normal;
11
+ font-weight: 500;
12
+ line-height: normal;
13
+ }
14
+
15
+ .do-badge-primary {
16
+ color: var(--do-badge-primary-content);
17
+ border-color: var(--do-badge-primary-border);
18
+ background-color: var(--do-badge-primary-bg);
19
+ }
20
+
21
+ .do-badge-primary:hover,
22
+ .do-badge-primary:focus {
23
+ color: var(--do-badge-primary-hover-content);
24
+ border-color: var(--do-badge-primary-border);
25
+ background-color: var(--do-badge-primary-hover-bg);
26
+ }
@@ -0,0 +1,46 @@
1
+ .do-counter-wrapper {
2
+ position: relative;
3
+ display: inline-block;
4
+ }
5
+
6
+ .do-counter {
7
+ display: inline-flex;
8
+ padding: 2px 3px;
9
+ flex-direction: column;
10
+ justify-content: center;
11
+ align-items: center;
12
+ border-radius: 48px;
13
+ font-size: 12px;
14
+ font-style: normal;
15
+ font-weight: 400;
16
+ line-height: normal;
17
+ align-self: stretch;
18
+ }
19
+
20
+ .do-counter-tooltip {
21
+ position: absolute;
22
+ top: 100%;
23
+ left: 0;
24
+ /* transform: translateX(-50%); */
25
+ background: var(--do-counter-primary-bg);
26
+ color: var(--do-counter-primary-content);
27
+ font-size: 12px;
28
+ padding: 4px 8px;
29
+ border-radius: 4px;
30
+ white-space: nowrap;
31
+ margin-top: 4px;
32
+ opacity: 0;
33
+ pointer-events: none;
34
+ transition: opacity 0.2s ease-in-out;
35
+ z-index: 10;
36
+ }
37
+
38
+ .do-counter-wrapper:hover .do-counter-tooltip {
39
+ opacity: 1;
40
+ pointer-events: auto;
41
+ }
42
+
43
+ .do-counter-primary {
44
+ color: var(--do-counter-primary-content);
45
+ background-color: var(--do-counter-primary-bg);
46
+ }
@@ -5,6 +5,8 @@
5
5
  @import "./button.css";
6
6
  @import "./border.css";
7
7
  @import "./color.css";
8
+ @import "./badge.css";
9
+ @import "./counter.css";
8
10
 
9
11
  /*
10
12
  To modify themes (light and dark):
@@ -46,6 +46,17 @@
46
46
  --do-chip-content-hover: #FAFAFA;
47
47
  --do-chip-bg-hover: #27272A;
48
48
 
49
+ /*badge colors*/
50
+ --do-badge-primary-content: #FAFAFA;
51
+ --do-badge-primary-bg: #52525B;
52
+ --do-badge-primary-hover-content: #FAFAFA;
53
+ --do-badge-primary-hover-bg: #27272A;
54
+ --do-badge-primary-border: #71717A;
55
+
56
+ /*counter colors*/
57
+ --do-counter-primary-content:#FAFAFA;
58
+ --do-counter-primary-bg:#71717A;
59
+
49
60
 
50
61
 
51
62
  /* base sizes */
@@ -49,6 +49,17 @@
49
49
  --do-chip-content-hover: #fafafa;
50
50
  --do-chip-bg-hover: #27272a;
51
51
 
52
+ /*badge colors*/
53
+ --do-badge-primary-content: #3F3F46;
54
+ --do-badge-primary-bg: #FAFAFA;
55
+ --do-badge-primary-hover-content:#FAFAFA;
56
+ --do-badge-primary-hover-bg: #52525B;
57
+ --do-badge-primary-border: #A3A3A3;
58
+
59
+ /*counter colors*/
60
+ --do-counter-primary-content: #3F3F46;
61
+ --do-counter-primary-bg: #D4D4D8;
62
+
52
63
  /* base sizes */
53
64
  --size-selector: 0.25rem;
54
65
  --size-field: 0.25rem;
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Button, Icon } from './atoms/index.js';
2
- import { IconButton, ActionChip } from './molecules/index.js';
3
- export { Button, Icon, IconButton, ActionChip };
1
+ import { Button, Icon, Counter, Badge } from './atoms/index.js';
2
+ import { IconButton, CounterBadge } from './molecules/index.js';
3
+ export { Button, Icon, Counter, Badge, IconButton, CounterBadge };
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAC,UAAU,EAAE,UAAU,EAAC,MAAM,sBAAsB,CAAC;AAE5D,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAC,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAC,UAAU,EAAE,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAE9D,OAAO,EAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAC,CAAC"}
package/dist/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import { Button, Icon } from './atoms/index.js';
2
- import { IconButton, ActionChip } from './molecules/index.js';
3
- export { Button, Icon, IconButton, ActionChip };
1
+ import { Button, Icon, Counter, Badge } from './atoms/index.js';
2
+ import { IconButton, CounterBadge } from './molecules/index.js';
3
+ export { Button, Icon, Counter, Badge, IconButton, CounterBadge };
@@ -0,0 +1,29 @@
1
+ <script lang="ts">
2
+ import Badge from '../../atoms/Badge/Badge.svelte';
3
+ import Counter from '../../atoms/Counter/Counter.svelte';
4
+
5
+ export let badgeLabel: string = 'Texto';
6
+ export let badgeCustomClass: string = '';
7
+ export let counterLabel: string = '10';
8
+ export let counterTooltip: boolean = false;
9
+ export let maxLength: number | null = null;
10
+ </script>
11
+
12
+ <!-- @component CounterBadge
13
+ ```Svelte
14
+ <CounterBadge badgeLabel={badgeLabel} badgeCustomClass={badgeCustomClass} counterTooltip={counterTooltip} maxLength={maxLength} counterLabel={counterLabel}>
15
+ <slot />
16
+ </CounterBadge>
17
+ ```
18
+ - `counterLabel?`: string
19
+ - `badgeLabel?`: string
20
+ - `badgeCustomClass?`: string - additional custom class for styling
21
+ - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
22
+ - `counterTooltip?`: boolean - if true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
23
+ -->
24
+
25
+ <Badge label={badgeLabel} customClass={badgeCustomClass} {maxLength}>
26
+ <Counter label={counterLabel} tooltipContent={counterTooltip}>
27
+ <slot />
28
+ </Counter>
29
+ </Badge>
@@ -0,0 +1,47 @@
1
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
2
+ new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
3
+ $$bindings?: Bindings;
4
+ } & Exports;
5
+ (internal: unknown, props: Props & {
6
+ $$events?: Events;
7
+ $$slots?: Slots;
8
+ }): Exports & {
9
+ $set?: any;
10
+ $on?: any;
11
+ };
12
+ z_$$bindings?: Bindings;
13
+ }
14
+ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
15
+ default: any;
16
+ } ? Props extends Record<string, never> ? any : {
17
+ children?: any;
18
+ } : {});
19
+ /**
20
+ * CounterBadge
21
+ * ```Svelte
22
+ * <CounterBadge badgeLabel={badgeLabel} badgeCustomClass={badgeCustomClass} counterTooltip={counterTooltip} maxLength={maxLength} counterLabel={counterLabel}>
23
+ * <slot />
24
+ * </CounterBadge>
25
+ * ```
26
+ * - `counterLabel?`: string
27
+ * - `badgeLabel?`: string
28
+ * - `badgeCustomClass?`: string - additional custom class for styling
29
+ * - `maxLength?`: number | null - max length of the text, if exceeded it will be truncated and "…" will be added
30
+ * - `counterTooltip?`: boolean - if true, the slot content will be displayed in a tooltip, which receives any HTML content related to the counted elements to display while hovering
31
+ */
32
+ declare const CounterBadge: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
33
+ badgeLabel?: string;
34
+ badgeCustomClass?: string;
35
+ counterLabel?: string;
36
+ counterTooltip?: boolean;
37
+ maxLength?: number | null;
38
+ }, {
39
+ default: {};
40
+ }>, {
41
+ [evt: string]: CustomEvent<any>;
42
+ }, {
43
+ default: {};
44
+ }, {}, string>;
45
+ type CounterBadge = InstanceType<typeof CounterBadge>;
46
+ export default CounterBadge;
47
+ //# sourceMappingURL=CounterBadge.svelte.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"CounterBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/CounterBadge/CounterBadge.svelte.ts"],"names":[],"mappings":"AA2BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId;;;;;;;;;;;;GAYG;AACH,QAAA,MAAM,YAAY;iBA5BkK,MAAM;uBAAqB,MAAM;mBAAiB,MAAM;qBAAmB,OAAO;gBAAc,MAAM,GAAG,IAAI;;;;;;;cA4B1L,CAAC;AACtF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
@@ -0,0 +1,8 @@
1
+ export interface iProps {
2
+ badgeLabel: string;
3
+ badgeCustomClass: string;
4
+ counterLabel: string;
5
+ counterTooltip: boolean;
6
+ maxLength: number | null | undefined;
7
+ }
8
+ //# sourceMappingURL=iProps.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"iProps.d.ts","sourceRoot":"","sources":["../../../src/lib/molecules/CounterBadge/iProps.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,MAAM;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;CACrC"}
@@ -0,0 +1 @@
1
+ export {};
@@ -1,4 +1,4 @@
1
1
  import IconButton from "./IconButton/IconButton.svelte";
2
- import ActionChip from "./ActionChip/ActionChip.svelte";
3
- export { IconButton, ActionChip };
2
+ import CounterBadge from "./CounterBadge/CounterBadge.svelte";
3
+ export { IconButton, CounterBadge };
4
4
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,gCAAgC,CAAC;AACxD,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/molecules/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,gCAAgC,CAAC;AAExD,OAAO,YAAY,MAAM,oCAAoC,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,CAAC"}
@@ -1,3 +1,4 @@
1
1
  import IconButton from "./IconButton/IconButton.svelte";
2
- import ActionChip from "./ActionChip/ActionChip.svelte";
3
- export { IconButton, ActionChip };
2
+ // import ActionChip from "./ActionChip/ActionChip.svelte"; //agregar cuando se implemente en el figma del ds
3
+ import CounterBadge from "./CounterBadge/CounterBadge.svelte";
4
+ export { IconButton, CounterBadge };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "do-ui-design-system",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "description": "Design system en Svelte + CSS + Storybook",
5
5
  "author": "Data Observatory",
6
6
  "license": "MIT",