revotech-ui-kit 0.0.11 → 0.0.12
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/src/components/atoms/alert/alert.atom.d.ts +7 -0
- package/dist/src/components/atoms/card/card.atom.d.ts +10 -0
- package/dist/src/components/atoms/checkbox/checkbox.atom.d.ts +5 -0
- package/dist/src/components/atoms/combo-box/combo-box.atom.d.ts +5 -0
- package/dist/src/components/atoms/combo-box/combo-box.stories.d.ts +5 -6
- package/dist/src/components/atoms/command/command.stories.d.ts +11 -0
- package/dist/src/components/atoms/dialog/dialog-close.d.ts +5 -0
- package/dist/src/components/atoms/dialog/dialog.atom.d.ts +17 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.d.ts +19 -3
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.d.ts +1 -0
- package/dist/src/components/atoms/index.d.ts +11 -5
- package/dist/src/components/atoms/label/label.atom.d.ts +5 -0
- package/dist/src/components/atoms/popover/popover.atom.d.ts +11 -1
- package/dist/src/components/atoms/textarea/textarea.atom.d.ts +16 -0
- package/dist/src/components/atoms/textarea/textarea.stories.d.ts +7 -0
- package/dist/src/components/atoms/textarea/textarea.styles.d.ts +1 -0
- package/dist/src/components/atoms/textarea/textarea.type.d.ts +11 -0
- package/dist/src/components/atoms/toggle/toggle.stories.d.ts +5 -6
- package/dist/src/components/molecules/breadCrumb/Breadcrumb-link.d.ts +7 -0
- package/dist/src/components/molecules/breadCrumb/breadCrumb.stories.d.ts +16 -0
- package/dist/src/components/molecules/breadCrumb/breadcrumb-ellipsis.d.ts +6 -0
- package/dist/src/components/molecules/breadCrumb/breadcrumb-item.d.ts +6 -0
- package/dist/src/components/molecules/breadCrumb/breadcrumb-list.d.ts +6 -0
- package/dist/src/components/molecules/breadCrumb/breadcrumb-separator.d.ts +6 -0
- package/dist/src/components/molecules/breadCrumb/breadcrumb-text.d.ts +6 -0
- package/dist/src/components/molecules/breadCrumb/breadcrumb.molecules.d.ts +6 -0
- package/dist/src/components/molecules/breadCrumb/breadcrumb.styles.d.ts +6 -0
- package/dist/src/components/molecules/index.d.ts +7 -1
- package/dist/src/components/molecules/toggle-group/defs.d.ts +37 -0
- package/dist/src/components/molecules/toggle-group/toggle-group-item.d.ts +17 -0
- package/dist/src/components/molecules/toggle-group/toggle-group.molecules.d.ts +19 -0
- package/dist/src/components/molecules/toggle-group/toggle-group.stories.d.ts +5 -0
- package/dist/src/components/molecules/toggle-group/toggle-group.style.d.ts +4 -0
- package/dist/src/index.d.ts +2 -4
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/dist/revotech-ui-kit.cjs +0 -2293
- package/dist/revotech-ui-kit.js +0 -5608
- package/dist/src/assets/icons/arrows.icon.js +0 -20
- package/dist/src/assets/icons/arrows.icon.js.map +0 -1
- package/dist/src/assets/icons/index.js +0 -4
- package/dist/src/assets/icons/index.js.map +0 -1
- package/dist/src/assets/icons/search.icon.js +0 -19
- package/dist/src/assets/icons/search.icon.js.map +0 -1
- package/dist/src/assets/icons/tick.icon.js +0 -20
- package/dist/src/assets/icons/tick.icon.js.map +0 -1
- package/dist/src/components/atoms/alert/alert-description.js +0 -18
- package/dist/src/components/atoms/alert/alert-description.js.map +0 -1
- package/dist/src/components/atoms/alert/alert-title.js +0 -20
- package/dist/src/components/atoms/alert/alert-title.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.atom.js +0 -55
- package/dist/src/components/atoms/alert/alert.atom.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.stories.js +0 -62
- package/dist/src/components/atoms/alert/alert.stories.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.styles.js +0 -21
- package/dist/src/components/atoms/alert/alert.styles.js.map +0 -1
- package/dist/src/components/atoms/alert/alert.types.js +0 -2
- package/dist/src/components/atoms/alert/alert.types.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.atom.js +0 -43
- package/dist/src/components/atoms/badge/badge.atom.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.stories.js +0 -110
- package/dist/src/components/atoms/badge/badge.stories.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.style.js +0 -17
- package/dist/src/components/atoms/badge/badge.style.js.map +0 -1
- package/dist/src/components/atoms/badge/badge.type.js +0 -2
- package/dist/src/components/atoms/badge/badge.type.js.map +0 -1
- package/dist/src/components/atoms/button/button.atom.js +0 -67
- package/dist/src/components/atoms/button/button.atom.js.map +0 -1
- package/dist/src/components/atoms/button/button.stories.js +0 -204
- package/dist/src/components/atoms/button/button.stories.js.map +0 -1
- package/dist/src/components/atoms/button/button.style.js +0 -24
- package/dist/src/components/atoms/button/button.style.js.map +0 -1
- package/dist/src/components/atoms/button/button.type.js +0 -2
- package/dist/src/components/atoms/button/button.type.js.map +0 -1
- package/dist/src/components/atoms/card/card-content.js +0 -17
- package/dist/src/components/atoms/card/card-content.js.map +0 -1
- package/dist/src/components/atoms/card/card-description.js +0 -17
- package/dist/src/components/atoms/card/card-description.js.map +0 -1
- package/dist/src/components/atoms/card/card-footer.js +0 -17
- package/dist/src/components/atoms/card/card-footer.js.map +0 -1
- package/dist/src/components/atoms/card/card-header.js +0 -17
- package/dist/src/components/atoms/card/card-header.js.map +0 -1
- package/dist/src/components/atoms/card/card-title.js +0 -17
- package/dist/src/components/atoms/card/card-title.js.map +0 -1
- package/dist/src/components/atoms/card/card.atom.js +0 -25
- package/dist/src/components/atoms/card/card.atom.js.map +0 -1
- package/dist/src/components/atoms/card/card.stories.js +0 -136
- package/dist/src/components/atoms/card/card.stories.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.atom.js +0 -87
- package/dist/src/components/atoms/checkbox/checkbox.atom.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.stories.js +0 -244
- package/dist/src/components/atoms/checkbox/checkbox.stories.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.style.js +0 -3
- package/dist/src/components/atoms/checkbox/checkbox.style.js.map +0 -1
- package/dist/src/components/atoms/checkbox/checkbox.type.js +0 -2
- package/dist/src/components/atoms/checkbox/checkbox.type.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box-input.js +0 -47
- package/dist/src/components/atoms/combo-box/combo-box-input.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box-item.js +0 -85
- package/dist/src/components/atoms/combo-box/combo-box-item.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box-list.js +0 -67
- package/dist/src/components/atoms/combo-box/combo-box-list.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box.atom.js +0 -199
- package/dist/src/components/atoms/combo-box/combo-box.atom.js.map +0 -1
- package/dist/src/components/atoms/combo-box/combo-box.stories.js +0 -86
- package/dist/src/components/atoms/combo-box/combo-box.stories.js.map +0 -1
- package/dist/src/components/atoms/command-empty/command-empty.atom.js +0 -53
- package/dist/src/components/atoms/command-empty/command-empty.atom.js.map +0 -1
- package/dist/src/components/atoms/command-group/command-group.atom.js +0 -70
- package/dist/src/components/atoms/command-group/command-group.atom.js.map +0 -1
- package/dist/src/components/atoms/command-item/command-item.atom.js +0 -78
- package/dist/src/components/atoms/command-item/command-item.atom.js.map +0 -1
- package/dist/src/components/atoms/command-list/command-list.atom.js +0 -35
- package/dist/src/components/atoms/command-list/command-list.atom.js.map +0 -1
- package/dist/src/components/atoms/command-separator/command-separator.atom.js +0 -51
- package/dist/src/components/atoms/command-separator/command-separator.atom.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-close.js +0 -46
- package/dist/src/components/atoms/dialog/dialog-close.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-content.js +0 -72
- package/dist/src/components/atoms/dialog/dialog-content.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-footer.js +0 -22
- package/dist/src/components/atoms/dialog/dialog-footer.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-header.js +0 -40
- package/dist/src/components/atoms/dialog/dialog-header.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-overly.js +0 -20
- package/dist/src/components/atoms/dialog/dialog-overly.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog-trigger.js +0 -53
- package/dist/src/components/atoms/dialog/dialog-trigger.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog.atom.js +0 -78
- package/dist/src/components/atoms/dialog/dialog.atom.js.map +0 -1
- package/dist/src/components/atoms/dialog/dialog.stories.js +0 -88
- package/dist/src/components/atoms/dialog/dialog.stories.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js +0 -115
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-checkbox-Item.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js +0 -80
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-content.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js +0 -70
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-group.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js +0 -78
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-item.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js +0 -116
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-radio-item.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js +0 -51
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-seperator.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js +0 -20
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu-shortcut.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js +0 -77
- package/dist/src/components/atoms/dropdownMenu/dropdown-menu.atom.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js +0 -211
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.stories.js.map +0 -1
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js +0 -4
- package/dist/src/components/atoms/dropdownMenu/dropdownMenu.style.js.map +0 -1
- package/dist/src/components/atoms/index.js +0 -14
- package/dist/src/components/atoms/index.js.map +0 -1
- package/dist/src/components/atoms/input/input.atom.js +0 -93
- package/dist/src/components/atoms/input/input.atom.js.map +0 -1
- package/dist/src/components/atoms/input/input.stories.js +0 -382
- package/dist/src/components/atoms/input/input.stories.js.map +0 -1
- package/dist/src/components/atoms/input/input.styles.js +0 -2
- package/dist/src/components/atoms/input/input.styles.js.map +0 -1
- package/dist/src/components/atoms/input/input.type.js +0 -2
- package/dist/src/components/atoms/input/input.type.js.map +0 -1
- package/dist/src/components/atoms/label/label.atom.js +0 -67
- package/dist/src/components/atoms/label/label.atom.js.map +0 -1
- package/dist/src/components/atoms/label/label.stories.js +0 -85
- package/dist/src/components/atoms/label/label.stories.js.map +0 -1
- package/dist/src/components/atoms/label/label.style.js +0 -3
- package/dist/src/components/atoms/label/label.style.js.map +0 -1
- package/dist/src/components/atoms/popover/popover-content.js +0 -62
- package/dist/src/components/atoms/popover/popover-content.js.map +0 -1
- package/dist/src/components/atoms/popover/popover-trigger.js +0 -50
- package/dist/src/components/atoms/popover/popover-trigger.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.atom.js +0 -40
- package/dist/src/components/atoms/popover/popover.atom.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.stories.js +0 -69
- package/dist/src/components/atoms/popover/popover.stories.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.style.js +0 -21
- package/dist/src/components/atoms/popover/popover.style.js.map +0 -1
- package/dist/src/components/atoms/popover/popover.types.js +0 -4
- package/dist/src/components/atoms/popover/popover.types.js.map +0 -1
- package/dist/src/components/atoms/toggle/defs.js +0 -30
- package/dist/src/components/atoms/toggle/defs.js.map +0 -1
- package/dist/src/components/atoms/toggle/toggle.atom.js +0 -72
- package/dist/src/components/atoms/toggle/toggle.atom.js.map +0 -1
- package/dist/src/components/atoms/toggle/toggle.stories.js +0 -189
- package/dist/src/components/atoms/toggle/toggle.stories.js.map +0 -1
- package/dist/src/components/atoms/toggle/toggle.style.js +0 -19
- package/dist/src/components/atoms/toggle/toggle.style.js.map +0 -1
- package/dist/src/components/command/command.d.ts +0 -56
- package/dist/src/components/command/command.js +0 -402
- package/dist/src/components/command/command.js.map +0 -1
- package/dist/src/components/command/command.stories.d.ts +0 -5
- package/dist/src/components/command/command.stories.js +0 -153
- package/dist/src/components/command/command.stories.js.map +0 -1
- package/dist/src/components/index.js +0 -3
- package/dist/src/components/index.js.map +0 -1
- package/dist/src/components/molecules/command/command.molecules.js +0 -27
- package/dist/src/components/molecules/command/command.molecules.js.map +0 -1
- package/dist/src/components/molecules/command-input/command-input.atom.js +0 -125
- package/dist/src/components/molecules/command-input/command-input.atom.js.map +0 -1
- package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js +0 -2
- package/dist/src/components/molecules/dropdownMenu/dropdownMenu.molecules.js.map +0 -1
- package/dist/src/components/molecules/index.js +0 -2
- package/dist/src/components/molecules/index.js.map +0 -1
- package/dist/src/helpers/base-element.js +0 -62
- package/dist/src/helpers/base-element.js.map +0 -1
- package/dist/src/helpers/index.js +0 -4
- package/dist/src/helpers/index.js.map +0 -1
- package/dist/src/helpers/mouse-conroller.helper.js +0 -33
- package/dist/src/helpers/mouse-conroller.helper.js.map +0 -1
- package/dist/src/helpers/style.helpers.js +0 -6
- package/dist/src/helpers/style.helpers.js.map +0 -1
- package/dist/src/index.js +0 -5
- package/dist/src/index.js.map +0 -1
- package/dist/src/interfaces/actionable.interface.js +0 -2
- package/dist/src/interfaces/actionable.interface.js.map +0 -1
- package/dist/src/interfaces/atomic.interface.js +0 -2
- package/dist/src/interfaces/atomic.interface.js.map +0 -1
- package/dist/src/interfaces/changeable.interface.js +0 -2
- package/dist/src/interfaces/changeable.interface.js.map +0 -1
- package/dist/src/interfaces/child-support-atomic.interface.js +0 -2
- package/dist/src/interfaces/child-support-atomic.interface.js.map +0 -1
- package/dist/src/interfaces/index.js +0 -7
- package/dist/src/interfaces/index.js.map +0 -1
- package/dist/src/interfaces/intractable.interface.js +0 -2
- package/dist/src/interfaces/intractable.interface.js.map +0 -1
- package/dist/src/interfaces/variant.interface.js +0 -2
- package/dist/src/interfaces/variant.interface.js.map +0 -1
- package/dist/src/lib/index.js +0 -2
- package/dist/src/lib/index.js.map +0 -1
- package/dist/src/lib/next/next.lib.js +0 -2
- package/dist/src/lib/next/next.lib.js.map +0 -1
- package/dist/src/lib/react/react.lib.js +0 -16
- package/dist/src/lib/react/react.lib.js.map +0 -1
- package/dist/src/lib/tw-styles.js +0 -1956
- package/dist/src/lib/tw-styles.js.map +0 -1
- package/dist/src/styles/index.js +0 -2
- package/dist/src/styles/index.js.map +0 -1
- package/dist/src/styles/tw.styles.js +0 -2218
- package/dist/src/styles/tw.styles.js.map +0 -1
- package/dist/src/wc-ui-app.js +0 -88
- package/dist/src/wc-ui-app.js.map +0 -1
- package/dist/test/wc-ui-app.test.d.ts +0 -0
- package/dist/test/wc-ui-app.test.js +0 -18
- package/dist/test/wc-ui-app.test.js.map +0 -1
- package/dist/vite.config.d.ts +0 -2
- package/dist/vite.config.js +0 -29
- package/dist/vite.config.js.map +0 -1
- /package/dist/src/components/atoms/{command-empty → command}/command-empty.atom.d.ts +0 -0
- /package/dist/src/components/atoms/{command-group → command}/command-group.atom.d.ts +0 -0
- /package/dist/src/components/{molecules/command-input → atoms/command}/command-input.atom.d.ts +0 -0
- /package/dist/src/components/atoms/{command-item → command}/command-item.atom.d.ts +0 -0
- /package/dist/src/components/atoms/{command-list → command}/command-list.atom.d.ts +0 -0
- /package/dist/src/components/atoms/{command-separator → command}/command-separator.atom.d.ts +0 -0
- /package/dist/src/components/{molecules/command/command.molecules.d.ts → atoms/command/command.atom.d.ts} +0 -0
@@ -1,20 +0,0 @@
|
|
1
|
-
import { svg } from 'lit';
|
2
|
-
export function arrowsIcon() {
|
3
|
-
return svg ` <svg
|
4
|
-
class="shrink-0 size-3.5 text-gray-500 dark:text-neutral-500"
|
5
|
-
xmlns="http://www.w3.org/2000/svg"
|
6
|
-
width="24"
|
7
|
-
height="24"
|
8
|
-
viewBox="0 0 24 24"
|
9
|
-
fill="none"
|
10
|
-
stroke="currentColor"
|
11
|
-
stroke-width="2"
|
12
|
-
stroke-linecap="round"
|
13
|
-
stroke-linejoin="round"
|
14
|
-
>
|
15
|
-
<path d="m7 15 5 5 5-5"></path>
|
16
|
-
<path d="m7 9 5-5 5 5"></path>
|
17
|
-
</svg>
|
18
|
-
`;
|
19
|
-
}
|
20
|
-
//# sourceMappingURL=arrows.icon.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"arrows.icon.js","sourceRoot":"","sources":["../../../../src/assets/icons/arrows.icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,UAAU,UAAU;IACxB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;GAeT,CAAC;AACJ,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport function arrowsIcon() {\n return svg` <svg\n class=\"shrink-0 size-3.5 text-gray-500 dark:text-neutral-500\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n>\n <path d=\"m7 15 5 5 5-5\"></path>\n <path d=\"m7 9 5-5 5 5\"></path>\n</svg>\n `;\n}\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/assets/icons/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC","sourcesContent":["export * from './arrows.icon';\nexport * from './tick.icon';\nexport * from './search.icon';\n"]}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
import { svg } from 'lit';
|
2
|
-
export function searchIcon() {
|
3
|
-
return svg ` <svg
|
4
|
-
xmlns="http://www.w3.org/2000/svg"
|
5
|
-
width = "24"
|
6
|
-
height = "24"
|
7
|
-
viewBox = "0 0 24 24"
|
8
|
-
fill = "none"
|
9
|
-
stroke = "currentColor"
|
10
|
-
stroke-width="2"
|
11
|
-
stroke-linecap="round"
|
12
|
-
stroke-linejoin="round"
|
13
|
-
class="lucide lucide-search h-4 w-4 shrink-0 opacity-50" >
|
14
|
-
<circle cx="11" cy = "11" r = "8" > </circle>
|
15
|
-
<path d="m21 21-4.3-4.3"></path >
|
16
|
-
</svg>
|
17
|
-
`;
|
18
|
-
}
|
19
|
-
//# sourceMappingURL=search.icon.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"search.icon.js","sourceRoot":"","sources":["../../../../src/assets/icons/search.icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,UAAU,UAAU;IACxB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;GAcT,CAAC;AACJ,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport function searchIcon() {\n return svg` <svg \n xmlns=\"http://www.w3.org/2000/svg\" \n width = \"24\" \n height = \"24\" \n viewBox = \"0 0 24 24\" \n fill = \"none\" \n stroke = \"currentColor\" \n stroke-width=\"2\" \n stroke-linecap=\"round\" \n stroke-linejoin=\"round\" \n class=\"lucide lucide-search h-4 w-4 shrink-0 opacity-50\" > \n <circle cx=\"11\" cy = \"11\" r = \"8\" > </circle>\n <path d=\"m21 21-4.3-4.3\"></path > \n </svg>\n `;\n}\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { svg } from 'lit';
|
2
|
-
export function tickIcon() {
|
3
|
-
return svg `
|
4
|
-
<svg
|
5
|
-
class="shrink-0 size-3.5 text-blue-600 dark:text-blue-500"
|
6
|
-
xmlns="http://www.w3.org/2000/svg"
|
7
|
-
width="24"
|
8
|
-
height="24"
|
9
|
-
viewBox="0 0 24 24"
|
10
|
-
fill="none"
|
11
|
-
stroke="currentColor"
|
12
|
-
stroke-width="2"
|
13
|
-
stroke-linecap="round"
|
14
|
-
stroke-linejoin="round"
|
15
|
-
>
|
16
|
-
<path d="M20 6 9 17l-5-5"></path>
|
17
|
-
</svg>
|
18
|
-
`;
|
19
|
-
}
|
20
|
-
//# sourceMappingURL=tick.icon.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"tick.icon.js","sourceRoot":"","sources":["../../../../src/assets/icons/tick.icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,UAAU,QAAQ;IACtB,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;GAeT,CAAC;AACJ,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport function tickIcon() {\n return svg`\n <svg\n class=\"shrink-0 size-3.5 text-blue-600 dark:text-blue-500\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n >\n <path d=\"M20 6 9 17l-5-5\"></path>\n </svg>\n `;\n}\n"]}
|
@@ -1,18 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { LitElement, html, css } from 'lit';
|
3
|
-
import { customElement } from 'lit/decorators.js';
|
4
|
-
let AlertDescription = class AlertDescription extends LitElement {
|
5
|
-
render() {
|
6
|
-
return html `<slot></slot>`;
|
7
|
-
}
|
8
|
-
};
|
9
|
-
AlertDescription.styles = css `
|
10
|
-
:host {
|
11
|
-
display: block;
|
12
|
-
}
|
13
|
-
`;
|
14
|
-
AlertDescription = __decorate([
|
15
|
-
customElement('rtg-alert-description')
|
16
|
-
], AlertDescription);
|
17
|
-
export { AlertDescription };
|
18
|
-
//# sourceMappingURL=alert-description.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"alert-description.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert-description.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAO9C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AARM,uBAAM,GAAG,GAAG,CAAA;;;;GAIlB,AAJY,CAIX;AALS,gBAAgB;IAD5B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,gBAAgB,CAU5B","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('rtg-alert-description')\nexport class AlertDescription extends LitElement {\n static styles = css`\n :host {\n display: block;\n }\n `;\n\n render() {\n return html`<slot></slot>`;\n }\n}\n"]}
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { LitElement, html, css } from 'lit';
|
3
|
-
import { customElement } from 'lit/decorators.js';
|
4
|
-
let AlertTitle = class AlertTitle extends LitElement {
|
5
|
-
render() {
|
6
|
-
return html `<slot></slot>`;
|
7
|
-
}
|
8
|
-
};
|
9
|
-
AlertTitle.styles = css `
|
10
|
-
:host {
|
11
|
-
display: block;
|
12
|
-
font-weight: bold;
|
13
|
-
margin-bottom: 0.5rem;
|
14
|
-
}
|
15
|
-
`;
|
16
|
-
AlertTitle = __decorate([
|
17
|
-
customElement('rtg-alert-title')
|
18
|
-
], AlertTitle);
|
19
|
-
export { AlertTitle };
|
20
|
-
//# sourceMappingURL=alert-title.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"alert-title.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert-title.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IASxC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AAVM,iBAAM,GAAG,GAAG,CAAA;;;;;;GAMlB,AANY,CAMX;AAPS,UAAU;IADtB,aAAa,CAAC,iBAAiB,CAAC;GACpB,UAAU,CAYtB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('rtg-alert-title')\nexport class AlertTitle extends LitElement {\n static styles = css`\n :host {\n display: block;\n font-weight: bold;\n margin-bottom: 0.5rem;\n }\n `;\n\n render() {\n return html`<slot></slot>`;\n }\n}\n"]}
|
@@ -1,55 +0,0 @@
|
|
1
|
-
import { __decorate } from "tslib";
|
2
|
-
import { LitElement, html, css } from 'lit';
|
3
|
-
import { property } from 'lit/decorators.js';
|
4
|
-
import { customElement } from 'lit/decorators.js';
|
5
|
-
import { alertStyle } from './alert.styles';
|
6
|
-
import { TWStyles } from '../../../styles';
|
7
|
-
import { AlertTitle } from './alert-title';
|
8
|
-
import { AlertDescription } from './alert-description';
|
9
|
-
let Alert = class Alert extends LitElement {
|
10
|
-
constructor() {
|
11
|
-
super(...arguments);
|
12
|
-
this.variant = 'info';
|
13
|
-
this.size = 'default';
|
14
|
-
}
|
15
|
-
get alertClasses() {
|
16
|
-
return alertStyle({ variant: this.variant, size: this.size });
|
17
|
-
}
|
18
|
-
render() {
|
19
|
-
return html `
|
20
|
-
<div class="alert ${this.alertClasses}">
|
21
|
-
<slot name="title"></slot>
|
22
|
-
<slot name="description"></slot>
|
23
|
-
</div>
|
24
|
-
`;
|
25
|
-
}
|
26
|
-
};
|
27
|
-
Alert.styles = [
|
28
|
-
css `
|
29
|
-
:host {
|
30
|
-
display: block;
|
31
|
-
margin-bottom: 1rem;
|
32
|
-
}
|
33
|
-
.alert {
|
34
|
-
border: 1px solid transparent;
|
35
|
-
border-radius: 0.375rem;
|
36
|
-
}
|
37
|
-
.title {
|
38
|
-
font-weight: bold;
|
39
|
-
margin-bottom: 0.5rem;
|
40
|
-
}
|
41
|
-
`,
|
42
|
-
TWStyles,
|
43
|
-
];
|
44
|
-
Alert.alertVairants = alertStyle;
|
45
|
-
__decorate([
|
46
|
-
property({ type: String })
|
47
|
-
], Alert.prototype, "variant", void 0);
|
48
|
-
__decorate([
|
49
|
-
property({ type: String })
|
50
|
-
], Alert.prototype, "size", void 0);
|
51
|
-
Alert = __decorate([
|
52
|
-
customElement('rtg-alert')
|
53
|
-
], Alert);
|
54
|
-
export { Alert, AlertDescription, AlertTitle };
|
55
|
-
//# sourceMappingURL=alert.atom.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"alert.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.atom.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAGvD,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QAoB8B,YAAO,GAItB,MAAM,CAAC;QACQ,SAAI,GAAkC,SAAS,CAAC;IAc9E,CAAC;IAZC,IAAY,YAAY;QACtB,OAAO,UAAU,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAChE,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;0BACW,IAAI,CAAC,YAAY;;;;KAItC,CAAC;IACJ,CAAC;;AArCM,YAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;KAaF;IACD,QAAQ;CACT,AAhBY,CAgBX;AACK,mBAAa,GAAG,UAAU,AAAb,CAAc;AAEN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAIP;AACQ;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mCAAiD;AAzBxE,KAAK;IADV,aAAa,CAAC,WAAW,CAAC;GACrB,KAAK,CAuCV;AAED,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,CAAC","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { customElement } from 'lit/decorators.js';\nimport { alertStyle } from './alert.styles';\nimport { TWStyles } from '../../../styles';\nimport { AlertTitle } from './alert-title';\nimport { AlertDescription } from './alert-description';\n\n@customElement('rtg-alert')\nclass Alert extends LitElement {\n static styles = [\n css`\n :host {\n display: block;\n margin-bottom: 1rem;\n }\n .alert {\n border: 1px solid transparent;\n border-radius: 0.375rem;\n }\n .title {\n font-weight: bold;\n margin-bottom: 0.5rem;\n }\n `,\n TWStyles,\n ];\n static alertVairants = alertStyle;\n\n @property({ type: String }) variant:\n | 'success'\n | 'error'\n | 'warning'\n | 'info' = 'info';\n @property({ type: String }) size: 'default' | 'large' | 'small' = 'default';\n\n private get alertClasses() {\n return alertStyle({ variant: this.variant, size: this.size });\n }\n\n render() {\n return html`\n <div class=\"alert ${this.alertClasses}\">\n <slot name=\"title\"></slot>\n <slot name=\"description\"></slot>\n </div>\n `;\n }\n}\n\nexport { Alert, AlertDescription, AlertTitle };\n"]}
|
@@ -1,62 +0,0 @@
|
|
1
|
-
import { html } from 'lit';
|
2
|
-
import './alert.atom';
|
3
|
-
import { Alert as AlertComponent } from './alert.atom';
|
4
|
-
import { expect, within, waitFor } from '@storybook/test';
|
5
|
-
const testAlertBehavior = async (args, canvasElement) => {
|
6
|
-
const canvas = within(canvasElement);
|
7
|
-
// 1. Test:Alert exits
|
8
|
-
const alert = await waitFor(() => canvas.getByTestId('alert-id'));
|
9
|
-
//2. Test: Alert should have correct variant
|
10
|
-
expect(alert).toHaveAttribute('variant', args.variant);
|
11
|
-
//3. Test: Alert should have correct size
|
12
|
-
expect(alert).toHaveAttribute('size', args.size);
|
13
|
-
if (alert.shadowRoot) {
|
14
|
-
const innerDiv = alert.shadowRoot.querySelector('div');
|
15
|
-
//4. Test: Alert should have correct class
|
16
|
-
const expectedClasses = AlertComponent.alertVairants({
|
17
|
-
variant: args.variant,
|
18
|
-
size: args.size,
|
19
|
-
});
|
20
|
-
expect(innerDiv).toHaveClass(`alert ${expectedClasses}`);
|
21
|
-
}
|
22
|
-
};
|
23
|
-
export default {
|
24
|
-
title: 'components/atoms/alert',
|
25
|
-
tags: ['autodocs'],
|
26
|
-
argTypes: {
|
27
|
-
variant: {
|
28
|
-
control: 'select',
|
29
|
-
options: ['success', 'error', 'warning', 'info'],
|
30
|
-
},
|
31
|
-
size: {
|
32
|
-
control: 'select',
|
33
|
-
options: ['default', 'large', 'small'],
|
34
|
-
},
|
35
|
-
title: {
|
36
|
-
control: 'text',
|
37
|
-
},
|
38
|
-
message: {
|
39
|
-
control: 'text',
|
40
|
-
},
|
41
|
-
},
|
42
|
-
};
|
43
|
-
export const AlertStory = {
|
44
|
-
args: {
|
45
|
-
variant: 'info',
|
46
|
-
size: 'default',
|
47
|
-
title: 'Information',
|
48
|
-
message: 'This is an information message.',
|
49
|
-
},
|
50
|
-
render: ({ variant, size, message, title }) => html `
|
51
|
-
<rtg-alert data-testid="alert-id" variant=${variant} size=${size}>
|
52
|
-
<rtg-alert-title slot="title">${title}</rtg-alert-title>
|
53
|
-
<rtg-alert-description slot="description"
|
54
|
-
>${message}</rtg-alert-description
|
55
|
-
>
|
56
|
-
</rtg-alert>
|
57
|
-
`,
|
58
|
-
play: async ({ args, canvasElement }) => {
|
59
|
-
await testAlertBehavior(args, canvasElement);
|
60
|
-
},
|
61
|
-
};
|
62
|
-
//# sourceMappingURL=alert.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"alert.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,KAAK,IAAI,cAAc,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,iBAAiB,GAAG,KAAK,EAAE,IAAS,EAAE,aAAkB,EAAE,EAAE;IAChE,MAAM,MAAM,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IACrC,sBAAsB;IACtB,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC;IAElE,4CAA4C;IAC5C,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAEvD,yCAAyC;IACzC,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACjD,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QACrB,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACvD,0CAA0C;QAC1C,MAAM,eAAe,GAAG,cAAc,CAAC,aAAa,CAAC;YACnD,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;QACH,MAAM,CAAC,QAAQ,CAAC,CAAC,WAAW,CAAC,SAAS,eAAe,EAAE,CAAC,CAAC;IAC3D,CAAC;AACH,CAAC,CAAC;AAEF,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,CAAC;SACjD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;SACvC;QACD,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;SAChB;QACD,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;SAChB;KACF;CACM,CAAC;AAIV,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,aAAa;QACpB,OAAO,EAAE,iCAAiC;KAC3C;IACD,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;gDACL,OAAO,SAAS,IAAI;sCAC9B,KAAK;;WAEhC,OAAO;;;GAGf;IACD,IAAI,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,aAAa,EAAE,EAAE,EAAE;QACtC,MAAM,iBAAiB,CAAC,IAAI,EAAE,aAAa,CAAC,CAAC;IAC/C,CAAC;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { Meta, StoryObj } from '@storybook/web-components';\nimport './alert.atom';\nimport { Alert as AlertComponent } from './alert.atom';\n\nimport { expect, within, waitFor } from '@storybook/test';\n\nconst testAlertBehavior = async (args: any, canvasElement: any) => {\n const canvas = within(canvasElement);\n // 1. Test:Alert exits\n const alert = await waitFor(() => canvas.getByTestId('alert-id'));\n\n //2. Test: Alert should have correct variant\n expect(alert).toHaveAttribute('variant', args.variant);\n\n //3. Test: Alert should have correct size\n expect(alert).toHaveAttribute('size', args.size);\n if (alert.shadowRoot) {\n const innerDiv = alert.shadowRoot.querySelector('div');\n //4. Test: Alert should have correct class\n const expectedClasses = AlertComponent.alertVairants({\n variant: args.variant,\n size: args.size,\n });\n expect(innerDiv).toHaveClass(`alert ${expectedClasses}`);\n }\n};\n\nexport default {\n title: 'components/atoms/alert',\n tags: ['autodocs'],\n\n argTypes: {\n variant: {\n control: 'select',\n options: ['success', 'error', 'warning', 'info'],\n },\n size: {\n control: 'select',\n options: ['default', 'large', 'small'],\n },\n title: {\n control: 'text',\n },\n message: {\n control: 'text',\n },\n },\n} as Meta;\n\ntype Story = StoryObj;\n\nexport const AlertStory: Story = {\n args: {\n variant: 'info',\n size: 'default',\n title: 'Information',\n message: 'This is an information message.',\n },\n render: ({ variant, size, message, title }) => html`\n <rtg-alert data-testid=\"alert-id\" variant=${variant} size=${size}>\n <rtg-alert-title slot=\"title\">${title}</rtg-alert-title>\n <rtg-alert-description slot=\"description\"\n >${message}</rtg-alert-description\n >\n </rtg-alert>\n `,\n play: async ({ args, canvasElement }) => {\n await testAlertBehavior(args, canvasElement);\n },\n};\n"]}
|
@@ -1,21 +0,0 @@
|
|
1
|
-
import { cva } from 'class-variance-authority';
|
2
|
-
export const alertStyle = cva('p-4 rounded-sm text-sm font-medium', {
|
3
|
-
variants: {
|
4
|
-
variant: {
|
5
|
-
success: 'bg-green-100 text-green-800 border-green-200',
|
6
|
-
error: 'bg-red-100 text-red-800 border-red-200',
|
7
|
-
warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',
|
8
|
-
info: 'bg-blue-100 text-blue-800 border-blue-200',
|
9
|
-
},
|
10
|
-
size: {
|
11
|
-
small: 'text-sm',
|
12
|
-
default: 'text-base',
|
13
|
-
large: 'text-xl',
|
14
|
-
},
|
15
|
-
},
|
16
|
-
defaultVariants: {
|
17
|
-
variant: 'info',
|
18
|
-
size: 'default',
|
19
|
-
},
|
20
|
-
});
|
21
|
-
//# sourceMappingURL=alert.styles.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"alert.styles.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC,oCAAoC,EAAE;IAClE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,8CAA8C;YACvD,KAAK,EAAE,wCAAwC;YAC/C,OAAO,EAAE,iDAAiD;YAC1D,IAAI,EAAE,2CAA2C;SAClD;QACD,IAAI,EAAE;YACJ,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,WAAW;YACpB,KAAK,EAAE,SAAS;SACjB;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;QACf,IAAI,EAAE,SAAS;KAChB;CACF,CAAC,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const alertStyle = cva('p-4 rounded-sm text-sm font-medium', {\n variants: {\n variant: {\n success: 'bg-green-100 text-green-800 border-green-200',\n error: 'bg-red-100 text-red-800 border-red-200',\n warning: 'bg-yellow-100 text-yellow-800 border-yellow-200',\n info: 'bg-blue-100 text-blue-800 border-blue-200',\n },\n size: {\n small: 'text-sm',\n default: 'text-base',\n large: 'text-xl',\n },\n },\n defaultVariants: {\n variant: 'info',\n size: 'default',\n },\n});\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"alert.types.js","sourceRoot":"","sources":["../../../../../src/components/atoms/alert/alert.types.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}
|
@@ -1,43 +0,0 @@
|
|
1
|
-
var Badge_1;
|
2
|
-
import { __decorate } from "tslib";
|
3
|
-
import { html, css } from 'lit';
|
4
|
-
import { customElement, property } from 'lit/decorators.js';
|
5
|
-
import { cn, BaseElement } from '../../../helpers';
|
6
|
-
import { badgeStyle } from './badge.style';
|
7
|
-
import { TWStyles } from '../../../styles';
|
8
|
-
import { spread } from '@open-wc/lit-helpers';
|
9
|
-
let Badge = Badge_1 = class Badge extends BaseElement {
|
10
|
-
constructor() {
|
11
|
-
super(...arguments);
|
12
|
-
this.variant = 'default';
|
13
|
-
}
|
14
|
-
getAttributesToExclude() {
|
15
|
-
return ['variant'];
|
16
|
-
}
|
17
|
-
render() {
|
18
|
-
const attributes = this.getFilteredAttributes();
|
19
|
-
return html `
|
20
|
-
<div
|
21
|
-
id="rtg-badge-id"
|
22
|
-
class="
|
23
|
-
${cn(Badge_1.badgeVariants({
|
24
|
-
variant: this.variant,
|
25
|
-
className: this.className,
|
26
|
-
}))}"
|
27
|
-
${spread(attributes)}
|
28
|
-
>
|
29
|
-
<slot></slot>
|
30
|
-
</div>
|
31
|
-
`;
|
32
|
-
}
|
33
|
-
};
|
34
|
-
Badge.badgeVariants = badgeStyle;
|
35
|
-
Badge.styles = [css ``, TWStyles];
|
36
|
-
__decorate([
|
37
|
-
property({ type: String })
|
38
|
-
], Badge.prototype, "variant", void 0);
|
39
|
-
Badge = Badge_1 = __decorate([
|
40
|
-
customElement('rtg-badge')
|
41
|
-
], Badge);
|
42
|
-
export { Badge };
|
43
|
-
//# sourceMappingURL=badge.atom.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"badge.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,KAAK,aAAX,MAAM,KAAM,SAAQ,WAAW;IAA/B;;QAGuB,YAAO,GAAiB,SAAS,CAAC;IA2BhE,CAAC;IAvBW,sBAAsB;QAC9B,OAAO,CAAC,SAAS,CAAC,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEhD,OAAO,IAAI,CAAA;;;;UAIL,EAAE,CACF,OAAK,CAAC,aAAa,CAAC;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CACH;UACC,MAAM,CAAC,UAAU,CAAC;;;;KAIvB,CAAC;IACJ,CAAC;;AA5BM,mBAAa,GAAG,UAAU,AAAb,CAAc;AAI3B,YAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AAFN;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAmC;AAHnD,KAAK;IADjB,aAAa,CAAC,WAAW,CAAC;GACd,KAAK,CA8BjB","sourcesContent":["import { html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { cn, BaseElement } from '../../../helpers';\nimport { badgeStyle } from './badge.style';\nimport { BadgeVariant } from './badge.type';\nimport { TWStyles } from '../../../styles';\nimport { spread } from '@open-wc/lit-helpers';\n\n@customElement('rtg-badge')\nexport class Badge extends BaseElement {\n static badgeVariants = badgeStyle;\n\n @property({ type: String }) variant: BadgeVariant = 'default';\n\n static styles = [css``, TWStyles];\n\n protected getAttributesToExclude(): string[] {\n return ['variant'];\n }\n\n render() {\n const attributes = this.getFilteredAttributes();\n\n return html`\n <div\n id=\"rtg-badge-id\"\n class=\"\n ${cn(\n Badge.badgeVariants({\n variant: this.variant,\n className: this.className,\n })\n )}\"\n ${spread(attributes)}\n >\n <slot></slot>\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rtg-badge': Badge;\n }\n}\n"]}
|
@@ -1,110 +0,0 @@
|
|
1
|
-
import { html } from 'lit';
|
2
|
-
import './badge.atom';
|
3
|
-
import { expect, within, waitFor, userEvent } from '@storybook/test';
|
4
|
-
const meta = {
|
5
|
-
component: 'components/badge',
|
6
|
-
tags: ['autodocs'],
|
7
|
-
argTypes: {
|
8
|
-
variant: {
|
9
|
-
control: {
|
10
|
-
type: 'select',
|
11
|
-
},
|
12
|
-
description: 'Choose the visual style of the badge.',
|
13
|
-
table: {
|
14
|
-
defaultValue: { summary: 'default' },
|
15
|
-
},
|
16
|
-
options: [
|
17
|
-
'default',
|
18
|
-
'destructive',
|
19
|
-
'outline',
|
20
|
-
'secondary',
|
21
|
-
'ghost',
|
22
|
-
'link',
|
23
|
-
],
|
24
|
-
},
|
25
|
-
label: {
|
26
|
-
control: 'text',
|
27
|
-
description: ' The text displayed on the button. Can also be a function returning the label dynamically.',
|
28
|
-
table: {
|
29
|
-
defaultValue: { summary: '' },
|
30
|
-
},
|
31
|
-
},
|
32
|
-
},
|
33
|
-
};
|
34
|
-
const testBadgeBehavior = async (args, canvasElement) => {
|
35
|
-
const canvas = within(canvasElement);
|
36
|
-
const badge = await waitFor(() => canvas.getByTestId('badge-id'));
|
37
|
-
expect(badge).toBeVisible();
|
38
|
-
if (badge.shadowRoot) {
|
39
|
-
const badgeItem = await badge.shadowRoot.getElementById('rtg-badge-id');
|
40
|
-
if (badgeItem) {
|
41
|
-
expect(badgeItem).toHaveClass('inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full');
|
42
|
-
switch (args.variant) {
|
43
|
-
case 'default':
|
44
|
-
expect(badgeItem).toHaveClass('bg-primary');
|
45
|
-
expect(badgeItem).toHaveClass('text-primary-foreground');
|
46
|
-
break;
|
47
|
-
case 'destructive':
|
48
|
-
expect(badgeItem).toHaveClass('bg-destructive');
|
49
|
-
expect(badgeItem).toHaveClass('text-destructive-foreground');
|
50
|
-
break;
|
51
|
-
case 'outline':
|
52
|
-
expect(badgeItem).toHaveClass('border');
|
53
|
-
expect(badgeItem).toHaveClass('border-input');
|
54
|
-
expect(badgeItem).toHaveClass('bg-background');
|
55
|
-
expect(badgeItem).toHaveClass('shadow-sm');
|
56
|
-
expect(badgeItem).toHaveClass('hover:bg-accent');
|
57
|
-
expect(badgeItem).toHaveClass('hover:text-accent-foreground');
|
58
|
-
break;
|
59
|
-
case 'secondary':
|
60
|
-
expect(badgeItem).toHaveClass('bg-secondary');
|
61
|
-
expect(badgeItem).toHaveClass('text-secondary-foreground');
|
62
|
-
break;
|
63
|
-
case 'ghost':
|
64
|
-
expect(badgeItem).toHaveClass('hover:bg-accent');
|
65
|
-
expect(badgeItem).toHaveClass('hover:text-accent-foreground');
|
66
|
-
break;
|
67
|
-
case 'link':
|
68
|
-
expect(badgeItem).toHaveClass('text-primary');
|
69
|
-
expect(badgeItem).toHaveClass('underline');
|
70
|
-
break;
|
71
|
-
}
|
72
|
-
await userEvent.hover(badgeItem);
|
73
|
-
switch (args.variant) {
|
74
|
-
case 'outline':
|
75
|
-
expect(badgeItem).toHaveClass('hover:bg-accent');
|
76
|
-
expect(badgeItem).toHaveClass('hover:text-accent-foreground');
|
77
|
-
break;
|
78
|
-
case 'ghost':
|
79
|
-
expect(badgeItem).toHaveClass('bg-accent');
|
80
|
-
expect(badgeItem).toHaveClass('text-accent-foreground');
|
81
|
-
break;
|
82
|
-
case 'link':
|
83
|
-
expect(badgeItem).toHaveClass('text-primary');
|
84
|
-
expect(badgeItem).toHaveClass('underline');
|
85
|
-
break;
|
86
|
-
default:
|
87
|
-
break;
|
88
|
-
}
|
89
|
-
const focusedBadge = canvas.getByTestId('badge-id');
|
90
|
-
console.log(focusedBadge.textContent, args.label);
|
91
|
-
expect(focusedBadge.textContent).toContain(args.label);
|
92
|
-
}
|
93
|
-
}
|
94
|
-
};
|
95
|
-
export default meta;
|
96
|
-
export const Badge = {
|
97
|
-
args: {
|
98
|
-
variant: 'default',
|
99
|
-
label: 'badge',
|
100
|
-
},
|
101
|
-
render: ({ variant, label }) => html `
|
102
|
-
<rtg-badge data-testid="badge-id" variant=${variant}>
|
103
|
-
<p>${label}</p>
|
104
|
-
</rtg-badge>
|
105
|
-
`,
|
106
|
-
play: async ({ args, canvasElement }) => {
|
107
|
-
await testBadgeBehavior(args, canvasElement);
|
108
|
-
},
|
109
|
-
};
|
110
|
-
//# sourceMappingURL=badge.stories.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport { html } from 'lit';\nimport './badge.atom';\nimport { expect, within, waitFor, userEvent } from '@storybook/test';\n\nconst meta: Meta = {\n component: 'components/badge',\n tags: ['autodocs'],\n argTypes: {\n variant: {\n control: {\n type: 'select',\n },\n description: 'Choose the visual style of the badge.',\n table: {\n defaultValue: { summary: 'default' },\n },\n options: [\n 'default',\n 'destructive',\n 'outline',\n 'secondary',\n 'ghost',\n 'link',\n ],\n },\n label: {\n control: 'text',\n description:\n ' The text displayed on the button. Can also be a function returning the label dynamically.',\n table: {\n defaultValue: { summary: '' },\n },\n },\n },\n};\n\nconst testBadgeBehavior = async (args: any, canvasElement: any) => {\n const canvas = within(canvasElement);\n const badge = await waitFor(() => canvas.getByTestId('badge-id'));\n expect(badge).toBeVisible();\n if (badge.shadowRoot) {\n const badgeItem = await badge.shadowRoot.getElementById('rtg-badge-id');\n if (badgeItem) {\n expect(badgeItem).toHaveClass(\n 'inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full'\n );\n switch (args.variant) {\n case 'default':\n expect(badgeItem).toHaveClass('bg-primary');\n expect(badgeItem).toHaveClass('text-primary-foreground');\n break;\n case 'destructive':\n expect(badgeItem).toHaveClass('bg-destructive');\n expect(badgeItem).toHaveClass('text-destructive-foreground');\n break;\n case 'outline':\n expect(badgeItem).toHaveClass('border');\n expect(badgeItem).toHaveClass('border-input');\n expect(badgeItem).toHaveClass('bg-background');\n expect(badgeItem).toHaveClass('shadow-sm');\n expect(badgeItem).toHaveClass('hover:bg-accent');\n expect(badgeItem).toHaveClass('hover:text-accent-foreground');\n break;\n case 'secondary':\n expect(badgeItem).toHaveClass('bg-secondary');\n expect(badgeItem).toHaveClass('text-secondary-foreground');\n break;\n case 'ghost':\n expect(badgeItem).toHaveClass('hover:bg-accent');\n expect(badgeItem).toHaveClass('hover:text-accent-foreground');\n break;\n case 'link':\n expect(badgeItem).toHaveClass('text-primary');\n expect(badgeItem).toHaveClass('underline');\n break;\n }\n await userEvent.hover(badgeItem);\n switch (args.variant) {\n case 'outline':\n expect(badgeItem).toHaveClass('hover:bg-accent');\n expect(badgeItem).toHaveClass('hover:text-accent-foreground');\n break;\n case 'ghost':\n expect(badgeItem).toHaveClass('bg-accent');\n expect(badgeItem).toHaveClass('text-accent-foreground');\n break;\n case 'link':\n expect(badgeItem).toHaveClass('text-primary');\n expect(badgeItem).toHaveClass('underline');\n break;\n default:\n break;\n }\n const focusedBadge = canvas.getByTestId('badge-id');\n console.log(focusedBadge.textContent, args.label);\n expect(focusedBadge.textContent).toContain(args.label);\n }\n }\n};\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Badge: Story = {\n args: {\n variant: 'default',\n label: 'badge',\n },\n render: ({ variant, label }) => html`\n <rtg-badge data-testid=\"badge-id\" variant=${variant}>\n <p>${label}</p>\n </rtg-badge>\n `,\n play: async ({ args, canvasElement }) => {\n await testBadgeBehavior(args, canvasElement);\n },\n};\n"]}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import { cva } from 'class-variance-authority';
|
2
|
-
export const badgeStyle = cva('inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full', {
|
3
|
-
variants: {
|
4
|
-
variant: {
|
5
|
-
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
6
|
-
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
7
|
-
outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
8
|
-
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
9
|
-
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
10
|
-
link: 'text-primary underline-offset-4 hover:underline',
|
11
|
-
},
|
12
|
-
},
|
13
|
-
defaultVariants: {
|
14
|
-
variant: 'default',
|
15
|
-
},
|
16
|
-
});
|
17
|
-
//# sourceMappingURL=badge.style.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"badge.style.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAC3B,2LAA2L,EAC3L;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,+DAA+D;YACjE,WAAW,EACT,8EAA8E;YAChF,OAAO,EACL,0FAA0F;YAC5F,SAAS,EACP,wEAAwE;YAC1E,KAAK,EAAE,8CAA8C;YACrD,IAAI,EAAE,iDAAiD;SACxD;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,SAAS;KACnB;CACF,CACF,CAAC","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const badgeStyle = cva(\n 'inline-flex items-center border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent rounded-full',\n {\n variants: {\n variant: {\n default:\n 'bg-primary text-primary-foreground shadow hover:bg-primary/90',\n destructive:\n 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',\n outline:\n 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',\n secondary:\n 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',\n ghost: 'hover:bg-accent hover:text-accent-foreground',\n link: 'text-primary underline-offset-4 hover:underline',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"badge.type.js","sourceRoot":"","sources":["../../../../../src/components/atoms/badge/badge.type.ts"],"names":[],"mappings":"","sourcesContent":["export type BadgeVariant =\n | 'default'\n | 'destructive'\n | 'outline'\n | 'secondary'\n | 'ghost'\n | 'link';\n"]}
|
@@ -1,67 +0,0 @@
|
|
1
|
-
var Button_1;
|
2
|
-
import { __decorate } from "tslib";
|
3
|
-
import { html, css } from 'lit';
|
4
|
-
import { customElement, property } from 'lit/decorators.js';
|
5
|
-
import { cn, BaseElement } from '../../../helpers';
|
6
|
-
import { buttonStyle } from './button.style';
|
7
|
-
import { TWStyles } from '../../../styles';
|
8
|
-
import { spread } from '@open-wc/lit-helpers';
|
9
|
-
let Button = Button_1 = class Button extends BaseElement {
|
10
|
-
constructor() {
|
11
|
-
super(...arguments);
|
12
|
-
this.click = () => { };
|
13
|
-
this.disabled = false;
|
14
|
-
this.type = 'button';
|
15
|
-
this.variant = 'default';
|
16
|
-
this.size = 'default';
|
17
|
-
}
|
18
|
-
handleClick(e) {
|
19
|
-
e.stopPropagation();
|
20
|
-
if (!this.disabled) {
|
21
|
-
this.click();
|
22
|
-
}
|
23
|
-
}
|
24
|
-
getAttributesToExclude() {
|
25
|
-
return ['click', 'disabled', 'type', 'variant', 'size', 'data-testid'];
|
26
|
-
}
|
27
|
-
render() {
|
28
|
-
const attributes = this.getFilteredAttributes();
|
29
|
-
return html `
|
30
|
-
<button
|
31
|
-
type="${this.type}"
|
32
|
-
?disabled="${this.disabled}"
|
33
|
-
class="${cn(Button_1.buttonVariants({
|
34
|
-
variant: this.variant,
|
35
|
-
size: this.size,
|
36
|
-
className: this.className,
|
37
|
-
}))}"
|
38
|
-
@click="${this.handleClick}"
|
39
|
-
${spread(attributes)}
|
40
|
-
>
|
41
|
-
<slot></slot>
|
42
|
-
</button>
|
43
|
-
`;
|
44
|
-
}
|
45
|
-
};
|
46
|
-
Button.buttonVariants = buttonStyle;
|
47
|
-
Button.styles = [css ``, TWStyles];
|
48
|
-
__decorate([
|
49
|
-
property({ type: Function })
|
50
|
-
], Button.prototype, "click", void 0);
|
51
|
-
__decorate([
|
52
|
-
property({ type: Boolean })
|
53
|
-
], Button.prototype, "disabled", void 0);
|
54
|
-
__decorate([
|
55
|
-
property({ type: String })
|
56
|
-
], Button.prototype, "type", void 0);
|
57
|
-
__decorate([
|
58
|
-
property({ type: String })
|
59
|
-
], Button.prototype, "variant", void 0);
|
60
|
-
__decorate([
|
61
|
-
property({ type: String })
|
62
|
-
], Button.prototype, "size", void 0);
|
63
|
-
Button = Button_1 = __decorate([
|
64
|
-
customElement('rtg-button')
|
65
|
-
], Button);
|
66
|
-
export { Button };
|
67
|
-
//# sourceMappingURL=button.atom.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"file":"button.atom.js","sourceRoot":"","sources":["../../../../../src/components/atoms/button/button.atom.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAc,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,EAAE,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAGvC,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,WAAW;IAAhC;;QAGyB,UAAK,GAAG,GAAG,EAAE,GAAE,CAAC,CAAC;QAClB,aAAQ,GAAG,KAAK,CAAC;QAClB,SAAI,GAAe,QAAQ,CAAC;QAC5B,YAAO,GAAkB,SAAS,CAAC;QACnC,SAAI,GAAe,SAAS,CAAC;IAoC3D,CAAC;IAhCS,WAAW,CAAC,CAAa;QAC/B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAES,sBAAsB;QAC9B,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;IACzE,CAAC;IAED,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAC;QAEhD,OAAO,IAAI,CAAA;;gBAEC,IAAI,CAAC,IAAI;qBACJ,IAAI,CAAC,QAAQ;iBACjB,EAAE,CACT,QAAM,CAAC,cAAc,CAAC;YACpB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;SAC1B,CAAC,CACH;kBACS,IAAI,CAAC,WAAW;UACxB,MAAM,CAAC,UAAU,CAAC;;;;KAIvB,CAAC;IACJ,CAAC;;AAzCM,qBAAc,GAAG,WAAW,AAAd,CAAe;AAQ7B,aAAM,GAAG,CAAC,GAAG,CAAA,EAAE,EAAE,QAAQ,CAAC,AAApB,CAAqB;AANJ;IAA7B,QAAQ,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;qCAAkB;AAClB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wCAAkB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAA6B;AAC5B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAoC;AACnC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAA8B;AAP9C,MAAM;IADlB,aAAa,CAAC,YAAY,CAAC;GACf,MAAM,CA2ClB","sourcesContent":["import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { cn, BaseElement } from '../../../helpers';\nimport { ButtonSize, ButtonType, ButtonVariant } from './button.type';\nimport { buttonStyle } from './button.style';\nimport { TWStyles } from '../../../styles';\nimport { spread } from '@open-wc/lit-helpers';\n\n@customElement('rtg-button')\nexport class Button extends BaseElement {\n static buttonVariants = buttonStyle;\n\n @property({ type: Function }) click = () => {};\n @property({ type: Boolean }) disabled = false;\n @property({ type: String }) type: ButtonType = 'button';\n @property({ type: String }) variant: ButtonVariant = 'default';\n @property({ type: String }) size: ButtonSize = 'default';\n\n static styles = [css``, TWStyles];\n\n private handleClick(e: MouseEvent) {\n e.stopPropagation();\n if (!this.disabled) {\n this.click();\n }\n }\n\n protected getAttributesToExclude(): string[] {\n return ['click', 'disabled', 'type', 'variant', 'size', 'data-testid'];\n }\n\n render() {\n const attributes = this.getFilteredAttributes();\n\n return html`\n <button\n type=\"${this.type}\"\n ?disabled=\"${this.disabled}\"\n class=\"${cn(\n Button.buttonVariants({\n variant: this.variant,\n size: this.size,\n className: this.className,\n })\n )}\"\n @click=\"${this.handleClick}\"\n ${spread(attributes)}\n >\n <slot></slot>\n </button>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'rtg-button': Button;\n }\n}\n"]}
|