tuix-webcomponents 0.63.0 → 0.64.0
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.
- package/README.md +2 -2
- package/dist/addon-visual-tests-assets/visual-test-illustration.mp4 +0 -0
- package/dist/assets/Color-AVL7NMMY-IH_JbDEF.js +1 -0
- package/dist/assets/DocsRenderer-PQXLIZUC-C0ZKNA9m.js +1286 -0
- package/dist/{src/tuix-icon/TuixIcon.icons.js → assets/TuixIconButton-eQtxZNXh.js} +203 -125
- package/dist/assets/TuixModal-BZFIHTi_.js +78 -0
- package/dist/assets/TuixToast-BhxwZIGo.js +62 -0
- package/dist/assets/_commonjsHelpers-CqkleIqs.js +1 -0
- package/dist/assets/axe-C59a3kt3.js +30 -0
- package/dist/assets/iframe-ClsPaEIM.js +1057 -0
- package/dist/assets/index-DBzYXxxs.js +1554 -0
- package/dist/assets/index-TjhCmV-u.js +1 -0
- package/dist/assets/matchers-7Z3WT2CE-CcSi9QFY.js +14 -0
- package/dist/assets/screenSizes.enum-C1IhC_dy.js +13 -0
- package/dist/assets/state-CLjydI9z.js +13 -0
- package/dist/assets/tuix-button.stories-Dm_yifox.js +30 -0
- package/dist/assets/tuix-checkbox.stories-DmzoygjC.js +44 -0
- package/dist/assets/tuix-dropdown-object-list.stories-Neeajtj-.js +56 -0
- package/dist/assets/tuix-dropdown.stories-B7ea8QAz.js +28 -0
- package/dist/assets/tuix-icon-button.stories-CgbOSRO4.js +21 -0
- package/dist/assets/tuix-icon.enums-DYTtwLZl.js +1 -0
- package/dist/assets/tuix-icon.stories-CjN2XsKx.js +19 -0
- package/dist/assets/tuix-input.stories-CD7onvw2.js +33 -0
- package/dist/assets/tuix-link.stories-CT7pzGlx.js +35 -0
- package/dist/assets/tuix-modal.stories-B6v3cOPq.js +39 -0
- package/dist/assets/tuix-paper.enum-DhmlUJB7.js +1 -0
- package/dist/assets/tuix-paper.stories-CLnRPHNK.js +31 -0
- package/dist/assets/tuix-radio-button.stories-BwkKC3a9.js +35 -0
- package/dist/assets/tuix-table.stories-Bn-aZa0J.js +65 -0
- package/dist/assets/tuix-text.enums-Ck8cVqZZ.js +1 -0
- package/dist/assets/tuix-text.stories-BNIqPsGD.js +29 -0
- package/dist/assets/tuix-toast.stories-CRYiLiHK.js +21 -0
- package/dist/assets/tuix-toggle-button.stories-CY6wlDnA.js +40 -0
- package/dist/favicon-wrapper.svg +46 -0
- package/dist/favicon.svg +1 -0
- package/dist/iframe.html +685 -0
- package/dist/index.html +160 -0
- package/dist/index.json +1 -0
- package/dist/nunito-sans-bold-italic.woff2 +0 -0
- package/dist/nunito-sans-bold.woff2 +0 -0
- package/dist/nunito-sans-italic.woff2 +0 -0
- package/dist/nunito-sans-regular.woff2 +0 -0
- package/dist/project.json +1 -0
- package/dist/sb-addons/a11y-3/manager-bundle.js +5 -0
- package/dist/sb-addons/a11y-3/manager-bundle.js.LEGAL.txt +0 -0
- package/dist/sb-addons/chromatic-com-storybook-1/manager-bundle.js +356 -0
- package/dist/sb-addons/chromatic-com-storybook-1/manager-bundle.js.LEGAL.txt +40 -0
- package/dist/sb-addons/docs-2/manager-bundle.js +151 -0
- package/dist/sb-addons/docs-2/manager-bundle.js.LEGAL.txt +0 -0
- package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +971 -0
- package/dist/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js.LEGAL.txt +0 -0
- package/dist/sb-addons/vitest-4/manager-bundle.js +3 -0
- package/dist/sb-addons/vitest-4/manager-bundle.js.LEGAL.txt +0 -0
- package/dist/sb-common-assets/favicon-wrapper.svg +46 -0
- package/dist/sb-common-assets/favicon.svg +1 -0
- package/dist/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
- package/dist/sb-common-assets/nunito-sans-bold.woff2 +0 -0
- package/dist/sb-common-assets/nunito-sans-italic.woff2 +0 -0
- package/dist/sb-common-assets/nunito-sans-regular.woff2 +0 -0
- package/dist/sb-manager/globals-module-info.js +797 -0
- package/dist/sb-manager/globals-runtime.js +69679 -0
- package/dist/sb-manager/globals.js +34 -0
- package/dist/sb-manager/runtime.js +13195 -0
- package/package.json +6 -6
- package/dist/src/index.d.ts +0 -36
- package/dist/src/index.js +0 -42
- package/dist/src/tuix-button/TuixBaseButton.d.ts +0 -17
- package/dist/src/tuix-button/TuixBaseButton.js +0 -60
- package/dist/src/tuix-button/TuixButton.d.ts +0 -11
- package/dist/src/tuix-button/TuixButton.js +0 -84
- package/dist/src/tuix-button/TuixButton.styles.d.ts +0 -3
- package/dist/src/tuix-button/TuixButton.styles.js +0 -107
- package/dist/src/tuix-button/enums/tuix-button.enums.d.ts +0 -2
- package/dist/src/tuix-button/enums/tuix-button.enums.js +0 -6
- package/dist/src/tuix-button/interfaces/tuix-button.interface.d.ts +0 -1
- package/dist/src/tuix-button/interfaces/tuix-button.interface.js +0 -1
- package/dist/src/tuix-checkbox/TuixCheckbox.d.ts +0 -15
- package/dist/src/tuix-checkbox/TuixCheckbox.js +0 -106
- package/dist/src/tuix-checkbox/TuixCheckbox.styles.d.ts +0 -4
- package/dist/src/tuix-checkbox/TuixCheckbox.styles.js +0 -132
- package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.d.ts +0 -21
- package/dist/src/tuix-checkbox/enums/tuix-checkbox.enums.js +0 -23
- package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.d.ts +0 -5
- package/dist/src/tuix-checkbox/interfaces/tuix-checkbox.interface.js +0 -1
- package/dist/src/tuix-dropdown/TuixDropdown.d.ts +0 -55
- package/dist/src/tuix-dropdown/TuixDropdown.js +0 -360
- package/dist/src/tuix-dropdown/TuixDropdown.styles.d.ts +0 -3
- package/dist/src/tuix-dropdown/TuixDropdown.styles.js +0 -125
- package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.d.ts +0 -4
- package/dist/src/tuix-dropdown/enums/tuix-dropdown.enums.js +0 -5
- package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.d.ts +0 -15
- package/dist/src/tuix-dropdown/interfaces/tuix-dropdown.interface.js +0 -1
- package/dist/src/tuix-icon/TuixIcon.d.ts +0 -15
- package/dist/src/tuix-icon/TuixIcon.icons.d.ts +0 -6
- package/dist/src/tuix-icon/TuixIcon.js +0 -79
- package/dist/src/tuix-icon/enums/tuix-icon.enums.d.ts +0 -62
- package/dist/src/tuix-icon/enums/tuix-icon.enums.js +0 -69
- package/dist/src/tuix-icon-button/TuixIconButton.d.ts +0 -9
- package/dist/src/tuix-icon-button/TuixIconButton.js +0 -51
- package/dist/src/tuix-input/TuixInput.d.ts +0 -52
- package/dist/src/tuix-input/TuixInput.js +0 -370
- package/dist/src/tuix-input/TuixInput.styles.d.ts +0 -8
- package/dist/src/tuix-input/TuixInput.styles.js +0 -295
- package/dist/src/tuix-input/enums/tuix-input.enums.d.ts +0 -38
- package/dist/src/tuix-input/enums/tuix-input.enums.js +0 -41
- package/dist/src/tuix-input/interfaces/tuix-input.interface.d.ts +0 -18
- package/dist/src/tuix-input/interfaces/tuix-input.interface.js +0 -5
- package/dist/src/tuix-link/TuixLink.d.ts +0 -15
- package/dist/src/tuix-link/TuixLink.js +0 -71
- package/dist/src/tuix-link/TuixLink.styles.d.ts +0 -2
- package/dist/src/tuix-link/TuixLink.styles.js +0 -55
- package/dist/src/tuix-link/enums/linkTarget.enum.d.ts +0 -6
- package/dist/src/tuix-link/enums/linkTarget.enum.js +0 -7
- package/dist/src/tuix-modal/TuixModal.d.ts +0 -9
- package/dist/src/tuix-modal/TuixModal.js +0 -63
- package/dist/src/tuix-modal/TuixModal.styles.d.ts +0 -2
- package/dist/src/tuix-modal/TuixModal.styles.js +0 -55
- package/dist/src/tuix-paper/TuixPaper.d.ts +0 -10
- package/dist/src/tuix-paper/TuixPaper.js +0 -46
- package/dist/src/tuix-paper/TuixPaper.styles.d.ts +0 -1
- package/dist/src/tuix-paper/TuixPaper.styles.js +0 -30
- package/dist/src/tuix-paper/enums/tuix-paper.enum.d.ts +0 -13
- package/dist/src/tuix-paper/enums/tuix-paper.enum.js +0 -15
- package/dist/src/tuix-radio-button/TuixRadioButton.d.ts +0 -16
- package/dist/src/tuix-radio-button/TuixRadioButton.js +0 -95
- package/dist/src/tuix-radio-button/TuixRadioButton.styles.d.ts +0 -5
- package/dist/src/tuix-radio-button/TuixRadioButton.styles.js +0 -135
- package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.d.ts +0 -3
- package/dist/src/tuix-radio-button/interfaces/tuix-radio-button.interface.js +0 -1
- package/dist/src/tuix-table/TuixTable.d.ts +0 -46
- package/dist/src/tuix-table/TuixTable.js +0 -367
- package/dist/src/tuix-table/TuixTable.styles.d.ts +0 -2
- package/dist/src/tuix-table/TuixTable.styles.js +0 -197
- package/dist/src/tuix-table/interfaces/tuix-table.interface.d.ts +0 -45
- package/dist/src/tuix-table/interfaces/tuix-table.interface.js +0 -1
- package/dist/src/tuix-text/TuixText.d.ts +0 -12
- package/dist/src/tuix-text/TuixText.js +0 -66
- package/dist/src/tuix-text/TuixText.styles.d.ts +0 -2
- package/dist/src/tuix-text/TuixText.styles.js +0 -158
- package/dist/src/tuix-text/enums/tuix-text.enums.d.ts +0 -31
- package/dist/src/tuix-text/enums/tuix-text.enums.js +0 -63
- package/dist/src/tuix-toast/TuixToast.d.ts +0 -15
- package/dist/src/tuix-toast/TuixToast.js +0 -100
- package/dist/src/tuix-toast/TuixToast.styles.d.ts +0 -3
- package/dist/src/tuix-toast/TuixToast.styles.js +0 -43
- package/dist/src/tuix-toast/enums/tuix-toast.enums.d.ts +0 -20
- package/dist/src/tuix-toast/enums/tuix-toast.enums.js +0 -59
- package/dist/src/tuix-toggle-button/TuixToggleButton.d.ts +0 -13
- package/dist/src/tuix-toggle-button/TuixToggleButton.js +0 -85
- package/dist/src/tuix-toggle-button/TuixToggleButton.styles.d.ts +0 -5
- package/dist/src/tuix-toggle-button/TuixToggleButton.styles.js +0 -134
- package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.d.ts +0 -2
- package/dist/src/tuix-toggle-button/interfaces/tuix-toggle.interface.js +0 -1
- package/dist/src/utils/colors.d.ts +0 -29
- package/dist/src/utils/colors.js +0 -30
- package/dist/src/utils/darkColors.d.ts +0 -31
- package/dist/src/utils/darkColors.js +0 -32
- package/dist/src/utils/hex-rgb.d.ts +0 -5
- package/dist/src/utils/hex-rgb.js +0 -15
- package/dist/src/utils/interfaces/detail-value.interface.d.ts +0 -3
- package/dist/src/utils/interfaces/detail-value.interface.js +0 -1
- package/dist/src/utils/mainVariant.enum.d.ts +0 -4
- package/dist/src/utils/mainVariant.enum.js +0 -5
- package/dist/src/utils/screenSizes.enum.d.ts +0 -4
- package/dist/src/utils/screenSizes.enum.js +0 -5
- package/dist/src/utils/slottedClassName.d.ts +0 -2
- package/dist/src/utils/slottedClassName.js +0 -1
- package/dist/tsconfig.publish.tsbuildinfo +0 -1
package/package.json
CHANGED
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
},
|
|
120
120
|
"scripts": {
|
|
121
121
|
"analyze": "cem analyze --litelement",
|
|
122
|
-
"build": "
|
|
122
|
+
"build": "rm -rf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist && npm run build:css",
|
|
123
123
|
"build:css": "mkdir -p dist/assets && npm run compileStylesJss --silent -- dist/assets/tuix-styles.css",
|
|
124
124
|
"calculateNextVersion": "tsx ./scripts/detect-changes.ts",
|
|
125
125
|
"compileStylesJss": "tsx ./scripts/build-styles.ts",
|
|
@@ -128,13 +128,13 @@
|
|
|
128
128
|
"format:check": "prettier --check \"**/**/*.ts\" ",
|
|
129
129
|
"lint": "eslint './src/**/*.{ts,tsx}' --fix",
|
|
130
130
|
"prepare": "husky install",
|
|
131
|
-
"prepublish": "
|
|
131
|
+
"prepublish": "rm -rf dist && tsc -p tsconfig.publish.json && npm run analyze -- --exclude dist",
|
|
132
132
|
"publish:local": "./scripts/publish-local-npm.sh",
|
|
133
|
-
"start": "
|
|
134
|
-
"storybook": "
|
|
135
|
-
"storybook:build": "
|
|
133
|
+
"start": "rm -rf build && tsc --outDir build && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
|
|
134
|
+
"storybook": "rm -rf build && npm run analyze -- --exclude dist && storybook dev -p 6006",
|
|
135
|
+
"storybook:build": "rm -rf dist && npm run analyze -- --exclude dist && storybook build -o dist",
|
|
136
136
|
"test": "echo \"Error: no test specified\" && exit 1"
|
|
137
137
|
},
|
|
138
138
|
"type": "module",
|
|
139
|
-
"version": "0.
|
|
139
|
+
"version": "0.64.0"
|
|
140
140
|
}
|
package/dist/src/index.d.ts
DELETED
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
export { type CustomEventTuixButton } from './tuix-button/interfaces/tuix-button.interface.js';
|
|
2
|
-
export type { CustomEventTuixCheckbox, DetailValueCheckbox, } from './tuix-checkbox/interfaces/tuix-checkbox.interface.js';
|
|
3
|
-
export type { CustomEventTuixDropdownInput, CustomEventTuixDropdownSelect, TuixDropdownOption, TuixDropdownObjectOption, TuixDropdownPlainOption, } from './tuix-dropdown/interfaces/tuix-dropdown.interface.js';
|
|
4
|
-
export type { CustomEventTuixInput } from './tuix-input/interfaces/tuix-input.interface.js';
|
|
5
|
-
export type { CustomEventTuixRadioButton } from './tuix-radio-button/interfaces/tuix-radio-button.interface.js';
|
|
6
|
-
export type { CustomEventTuixToggle } from './tuix-toggle-button/interfaces/tuix-toggle.interface.js';
|
|
7
|
-
export type { DetailValue } from './utils/interfaces/detail-value.interface.js';
|
|
8
|
-
export { TuixText } from './tuix-text/TuixText.js';
|
|
9
|
-
export { TuixIcon } from './tuix-icon/TuixIcon.js';
|
|
10
|
-
export { TuixButton } from './tuix-button/TuixButton.js';
|
|
11
|
-
export { TuixPaper } from './tuix-paper/TuixPaper.js';
|
|
12
|
-
export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
|
|
13
|
-
export { TuixLink } from './tuix-link/TuixLink.js';
|
|
14
|
-
export { TuixInput } from './tuix-input/TuixInput.js';
|
|
15
|
-
export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
|
|
16
|
-
export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
|
|
17
|
-
export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
|
|
18
|
-
export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
|
|
19
|
-
export { TuixTable } from './tuix-table/TuixTable.js';
|
|
20
|
-
export type { IDataTableHeader, TuixTableElement, } from './tuix-table/interfaces/tuix-table.interface.js';
|
|
21
|
-
export { TuixToast } from './tuix-toast/TuixToast.js';
|
|
22
|
-
export { TuixModal } from './tuix-modal/TuixModal.js';
|
|
23
|
-
export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
|
|
24
|
-
export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
|
|
25
|
-
export { MainVariant } from './utils/mainVariant.enum.js';
|
|
26
|
-
export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
|
|
27
|
-
export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
|
|
28
|
-
export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
|
|
29
|
-
export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
|
|
30
|
-
export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
|
|
31
|
-
export { Palette } from './utils/colors.js';
|
|
32
|
-
export { DarkPalette } from './utils/darkColors.js';
|
|
33
|
-
export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
|
|
34
|
-
export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
|
|
35
|
-
export { ScreenSizes } from './utils/screenSizes.enum.js';
|
|
36
|
-
export declare function loadFonts(): void;
|
package/dist/src/index.js
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
export { TuixText } from './tuix-text/TuixText.js';
|
|
2
|
-
export { TuixIcon } from './tuix-icon/TuixIcon.js';
|
|
3
|
-
export { TuixButton } from './tuix-button/TuixButton.js';
|
|
4
|
-
export { TuixPaper } from './tuix-paper/TuixPaper.js';
|
|
5
|
-
export { TuixIconButton } from './tuix-icon-button/TuixIconButton.js';
|
|
6
|
-
export { TuixLink } from './tuix-link/TuixLink.js';
|
|
7
|
-
export { TuixInput } from './tuix-input/TuixInput.js';
|
|
8
|
-
export { TuixDropdown } from './tuix-dropdown/TuixDropdown.js';
|
|
9
|
-
export { TuixCheckbox } from './tuix-checkbox/TuixCheckbox.js';
|
|
10
|
-
export { TuixRadioButton } from './tuix-radio-button/TuixRadioButton.js';
|
|
11
|
-
export { TuixToggleButton } from './tuix-toggle-button/TuixToggleButton.js';
|
|
12
|
-
export { TuixTable } from './tuix-table/TuixTable.js';
|
|
13
|
-
export { TuixToast } from './tuix-toast/TuixToast.js';
|
|
14
|
-
export { TuixModal } from './tuix-modal/TuixModal.js';
|
|
15
|
-
export { ToastType } from './tuix-toast/enums/tuix-toast.enums.js';
|
|
16
|
-
export { TextSize, TextVariant } from './tuix-text/enums/tuix-text.enums.js';
|
|
17
|
-
export { MainVariant } from './utils/mainVariant.enum.js';
|
|
18
|
-
export { CheckboxLabelSide } from './tuix-checkbox/enums/tuix-checkbox.enums.js';
|
|
19
|
-
export { PaperElevation } from './tuix-paper/enums/tuix-paper.enum.js';
|
|
20
|
-
export { LinkTarget } from './tuix-link/enums/linkTarget.enum.js';
|
|
21
|
-
export { IconName, IconSizeVariant, } from './tuix-icon/enums/tuix-icon.enums.js';
|
|
22
|
-
export { DescriptionType, InputType, } from './tuix-input/enums/tuix-input.enums.js';
|
|
23
|
-
export { Palette } from './utils/colors.js';
|
|
24
|
-
export { DarkPalette } from './utils/darkColors.js';
|
|
25
|
-
export { DropdownType } from './tuix-dropdown/enums/tuix-dropdown.enums.js';
|
|
26
|
-
export { BorderRadiusPaper } from './tuix-paper/enums/tuix-paper.enum.js';
|
|
27
|
-
export { ScreenSizes } from './utils/screenSizes.enum.js';
|
|
28
|
-
export function loadFonts() {
|
|
29
|
-
const link1 = document.createElement('link');
|
|
30
|
-
link1.rel = 'preconnect';
|
|
31
|
-
link1.href = 'https://fonts.googleapis.com';
|
|
32
|
-
const link2 = document.createElement('link');
|
|
33
|
-
link2.rel = 'preconnect';
|
|
34
|
-
link2.href = 'https://fonts.gstatic.com';
|
|
35
|
-
const link3 = document.createElement('link');
|
|
36
|
-
link3.rel = 'stylesheet';
|
|
37
|
-
link3.href =
|
|
38
|
-
'https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap';
|
|
39
|
-
document.head.appendChild(link1);
|
|
40
|
-
document.head.appendChild(link2);
|
|
41
|
-
document.head.appendChild(link3);
|
|
42
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { LitElement, type TemplateResult } from 'lit';
|
|
2
|
-
import { MainVariant } from '../utils/mainVariant.enum';
|
|
3
|
-
import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
|
|
4
|
-
import '../tuix-icon/TuixIcon.js';
|
|
5
|
-
export declare abstract class TuixBaseButton extends LitElement {
|
|
6
|
-
variant: MainVariant;
|
|
7
|
-
disabled: boolean;
|
|
8
|
-
dark: boolean;
|
|
9
|
-
protected iconColor: string;
|
|
10
|
-
updated(): void;
|
|
11
|
-
protected _getTextColor(): string;
|
|
12
|
-
protected abstract _updateIconColor(): void;
|
|
13
|
-
protected _handleClick(): void;
|
|
14
|
-
protected _iconTemplate(iconName: IconName, iconSize: IconSizeVariant): TemplateResult;
|
|
15
|
-
protected abstract _buttonContent(): TemplateResult;
|
|
16
|
-
protected render(): TemplateResult;
|
|
17
|
-
}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html } from 'lit';
|
|
3
|
-
import { MainVariant } from '../utils/mainVariant.enum';
|
|
4
|
-
import { property, state } from 'lit/decorators.js';
|
|
5
|
-
import { buttonTextColor } from './enums/tuix-button.enums';
|
|
6
|
-
import '../tuix-icon/TuixIcon.js';
|
|
7
|
-
export class TuixBaseButton extends LitElement {
|
|
8
|
-
constructor() {
|
|
9
|
-
super(...arguments);
|
|
10
|
-
this.variant = MainVariant.PRIMARY;
|
|
11
|
-
this.disabled = false;
|
|
12
|
-
this.dark = false;
|
|
13
|
-
this.iconColor = '';
|
|
14
|
-
}
|
|
15
|
-
updated() {
|
|
16
|
-
this._updateIconColor();
|
|
17
|
-
}
|
|
18
|
-
_getTextColor() {
|
|
19
|
-
const element = this.shadowRoot?.querySelector('.button');
|
|
20
|
-
if (!element)
|
|
21
|
-
return buttonTextColor[this.variant];
|
|
22
|
-
const computedStyle = getComputedStyle(element);
|
|
23
|
-
return computedStyle.color;
|
|
24
|
-
}
|
|
25
|
-
_handleClick() {
|
|
26
|
-
this.dispatchEvent(new CustomEvent('customClick', { bubbles: true }));
|
|
27
|
-
}
|
|
28
|
-
_iconTemplate(iconName, iconSize) {
|
|
29
|
-
this._updateIconColor();
|
|
30
|
-
return html `<tuix-icon
|
|
31
|
-
size="${iconSize}"
|
|
32
|
-
name="${iconName}"
|
|
33
|
-
color="${this.iconColor}"
|
|
34
|
-
></tuix-icon>`;
|
|
35
|
-
}
|
|
36
|
-
render() {
|
|
37
|
-
return html `<button
|
|
38
|
-
@click=${this._handleClick}
|
|
39
|
-
@mouseenter=${this._updateIconColor}
|
|
40
|
-
@mouseleave=${this._updateIconColor}
|
|
41
|
-
@blur=${this._updateIconColor}
|
|
42
|
-
?disabled="${this.disabled}"
|
|
43
|
-
class="button"
|
|
44
|
-
>
|
|
45
|
-
${this._buttonContent()}
|
|
46
|
-
</button>`;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
__decorate([
|
|
50
|
-
property({ type: MainVariant, reflect: true })
|
|
51
|
-
], TuixBaseButton.prototype, "variant", void 0);
|
|
52
|
-
__decorate([
|
|
53
|
-
property({ type: Boolean, reflect: true })
|
|
54
|
-
], TuixBaseButton.prototype, "disabled", void 0);
|
|
55
|
-
__decorate([
|
|
56
|
-
property({ type: Boolean, reflect: true })
|
|
57
|
-
], TuixBaseButton.prototype, "dark", void 0);
|
|
58
|
-
__decorate([
|
|
59
|
-
state()
|
|
60
|
-
], TuixBaseButton.prototype, "iconColor", void 0);
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { type TemplateResult } from 'lit';
|
|
2
|
-
import { IconName } from '../tuix-icon/enums/tuix-icon.enums';
|
|
3
|
-
import { TuixBaseButton } from './TuixBaseButton';
|
|
4
|
-
export declare class TuixButton extends TuixBaseButton {
|
|
5
|
-
static styles: import("lit").CSSResult[];
|
|
6
|
-
full: boolean;
|
|
7
|
-
iconRight?: IconName;
|
|
8
|
-
iconLeft?: IconName;
|
|
9
|
-
protected _updateIconColor(): void;
|
|
10
|
-
protected _buttonContent(): TemplateResult;
|
|
11
|
-
}
|
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { css, html, nothing } from 'lit';
|
|
3
|
-
import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
|
|
4
|
-
import { buttonSizeStyles, buttonColorStyles, hostButtonStyles, } from './TuixButton.styles';
|
|
5
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
6
|
-
import { ScreenSizes } from '../utils/screenSizes.enum';
|
|
7
|
-
import { TuixBaseButton } from './TuixBaseButton';
|
|
8
|
-
let TuixButton = class TuixButton extends TuixBaseButton {
|
|
9
|
-
constructor() {
|
|
10
|
-
super(...arguments);
|
|
11
|
-
this.full = false;
|
|
12
|
-
}
|
|
13
|
-
static { this.styles = [
|
|
14
|
-
css `
|
|
15
|
-
:host([full]) .button {
|
|
16
|
-
width: 100%;
|
|
17
|
-
}
|
|
18
|
-
.button {
|
|
19
|
-
padding: 16px 32px;
|
|
20
|
-
border-radius: 4px;
|
|
21
|
-
border: none;
|
|
22
|
-
font-family: 'Rubik', sans-serif;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
@media only screen and (max-width: ${ScreenSizes.TABLET}px) {
|
|
26
|
-
.button {
|
|
27
|
-
padding: 14px 32px;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
32
|
-
.button {
|
|
33
|
-
padding: 12px 24px;
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
.container {
|
|
38
|
-
display: flex;
|
|
39
|
-
flex-direction: row;
|
|
40
|
-
justify-content: center;
|
|
41
|
-
align-items: center;
|
|
42
|
-
gap: 8px;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
46
|
-
.container {
|
|
47
|
-
gap: 6px;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
`,
|
|
51
|
-
hostButtonStyles,
|
|
52
|
-
buttonColorStyles,
|
|
53
|
-
buttonSizeStyles,
|
|
54
|
-
]; }
|
|
55
|
-
_updateIconColor() {
|
|
56
|
-
if (!this.iconLeft && !this.iconRight)
|
|
57
|
-
return;
|
|
58
|
-
this.iconColor = this._getTextColor();
|
|
59
|
-
}
|
|
60
|
-
_buttonContent() {
|
|
61
|
-
let iconSize = IconSizeVariant.MEDIUM;
|
|
62
|
-
if (screen.width <= ScreenSizes.TABLET) {
|
|
63
|
-
iconSize = IconSizeVariant.SMALL;
|
|
64
|
-
}
|
|
65
|
-
return html ` <div class="container">
|
|
66
|
-
${this.iconLeft ? this._iconTemplate(this.iconLeft, iconSize) : nothing}
|
|
67
|
-
<slot></slot>
|
|
68
|
-
${this.iconRight ? this._iconTemplate(this.iconRight, iconSize) : nothing}
|
|
69
|
-
</div>`;
|
|
70
|
-
}
|
|
71
|
-
};
|
|
72
|
-
__decorate([
|
|
73
|
-
property({ type: Boolean, reflect: true })
|
|
74
|
-
], TuixButton.prototype, "full", void 0);
|
|
75
|
-
__decorate([
|
|
76
|
-
property({ type: IconName })
|
|
77
|
-
], TuixButton.prototype, "iconRight", void 0);
|
|
78
|
-
__decorate([
|
|
79
|
-
property({ type: IconName })
|
|
80
|
-
], TuixButton.prototype, "iconLeft", void 0);
|
|
81
|
-
TuixButton = __decorate([
|
|
82
|
-
customElement('tuix-button')
|
|
83
|
-
], TuixButton);
|
|
84
|
-
export { TuixButton };
|
|
@@ -1,107 +0,0 @@
|
|
|
1
|
-
import { css, unsafeCSS } from 'lit';
|
|
2
|
-
import { Palette } from '../utils/colors';
|
|
3
|
-
import { ScreenSizes } from '../utils/screenSizes.enum';
|
|
4
|
-
import { DarkPalette } from '../utils/darkColors';
|
|
5
|
-
import { MainVariant } from '../utils/mainVariant.enum';
|
|
6
|
-
import slottedClassName from '../utils/slottedClassName';
|
|
7
|
-
import { TextSize } from '../tuix-text/enums/tuix-text.enums';
|
|
8
|
-
export const hostButtonStyles = css `
|
|
9
|
-
:host {
|
|
10
|
-
--t-button-primary-color: ${unsafeCSS(Palette.MAIN)};
|
|
11
|
-
--t-button-secondary-color: ${unsafeCSS(Palette.WHITE)};
|
|
12
|
-
--t-button-accent-color: ${unsafeCSS(Palette.SECONDARY)};
|
|
13
|
-
--t-button-text-color: ${unsafeCSS(Palette.WHITE)};
|
|
14
|
-
--t-button-text-secondary-color: ${unsafeCSS(Palette.MAIN)};
|
|
15
|
-
--t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_300)};
|
|
16
|
-
--t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_100)};
|
|
17
|
-
--t-button-hover-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};
|
|
18
|
-
--t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_800)};
|
|
19
|
-
--t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_100)};
|
|
20
|
-
--t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_200)};
|
|
21
|
-
}
|
|
22
|
-
:host([dark]) {
|
|
23
|
-
--t-button-primary-color: ${unsafeCSS(DarkPalette.MAIN)};
|
|
24
|
-
--t-button-text-color: ${unsafeCSS(DarkPalette.WHITE)};
|
|
25
|
-
--t-button-text-muted-color: ${unsafeCSS(Palette.PRIMARY_800)};
|
|
26
|
-
--t-button-disabled-bg-color: ${unsafeCSS(Palette.PRIMARY_950)};
|
|
27
|
-
--t-button-hover-primary-color: ${unsafeCSS(Palette.MAIN)};
|
|
28
|
-
--t-button-active-primary-color: ${unsafeCSS(Palette.PRIMARY_600)};
|
|
29
|
-
--t-button-secondary-color: ${unsafeCSS(Palette.BLACK)};
|
|
30
|
-
--t-button-hover-secondary-color: ${unsafeCSS(Palette.PRIMARY_950)};
|
|
31
|
-
--t-button-active-secondary-color: ${unsafeCSS(Palette.PRIMARY_800)};
|
|
32
|
-
}
|
|
33
|
-
`;
|
|
34
|
-
export const buttonSizeStyles = css `
|
|
35
|
-
${unsafeCSS(`
|
|
36
|
-
${slottedClassName(TextSize.Button)} {
|
|
37
|
-
font-size: 1rem;
|
|
38
|
-
font-weight: 400;
|
|
39
|
-
line-height: 1.2rem;
|
|
40
|
-
}
|
|
41
|
-
@media only screen and (max-width: ${ScreenSizes.TABLET}px) {
|
|
42
|
-
${slottedClassName(TextSize.Button)} {
|
|
43
|
-
font-size: 0.888rem;
|
|
44
|
-
font-weight: 400;
|
|
45
|
-
line-height: 1.065rem;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
@media only screen and (max-width: ${ScreenSizes.MOBILE}px) {
|
|
49
|
-
${slottedClassName(TextSize.Button)} {
|
|
50
|
-
font-size: 0.875rem;
|
|
51
|
-
font-weight: 400;
|
|
52
|
-
line-height: 1rem;
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
`)}
|
|
56
|
-
`;
|
|
57
|
-
export const buttonColorStyles = css `
|
|
58
|
-
:host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button {
|
|
59
|
-
background-color: var(--t-button-primary-color);
|
|
60
|
-
outline: none;
|
|
61
|
-
color: var(--t-button-text-color);
|
|
62
|
-
}
|
|
63
|
-
:host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:hover {
|
|
64
|
-
background-color: var(--t-button-hover-primary-color);
|
|
65
|
-
cursor: pointer;
|
|
66
|
-
}
|
|
67
|
-
:host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:focus {
|
|
68
|
-
background-color: var(--t-button-hover-primary-color);
|
|
69
|
-
outline: 2px solid var(--t-button-accent-color);
|
|
70
|
-
}
|
|
71
|
-
:host([variant='${unsafeCSS(MainVariant.PRIMARY)}']) .button:active {
|
|
72
|
-
background-color: var(--t-button-active-primary-color);
|
|
73
|
-
outline: none;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
:host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button {
|
|
77
|
-
background-color: var(--t-button-secondary-color);
|
|
78
|
-
outline: 1px solid var(--t-button-hover-primary-color);
|
|
79
|
-
color: var(--t-button-text-secondary-color);
|
|
80
|
-
}
|
|
81
|
-
:host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:hover {
|
|
82
|
-
background-color: var(--t-button-hover-secondary-color);
|
|
83
|
-
outline: 1px solid var(--t-button-primary-color);
|
|
84
|
-
color: var(--t-button-primary-color);
|
|
85
|
-
cursor: pointer;
|
|
86
|
-
}
|
|
87
|
-
:host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:focus {
|
|
88
|
-
background-color: var(--t-button-hover-secondary-color);
|
|
89
|
-
outline: 2px solid var(--t-button-accent-color);
|
|
90
|
-
color: var(--t-button-primary-color);
|
|
91
|
-
}
|
|
92
|
-
:host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:active {
|
|
93
|
-
background-color: var(--t-button-active-secondary-color);
|
|
94
|
-
outline: 1px solid var(--t-button-primary-color);
|
|
95
|
-
color: var(--t-button-primary-color);
|
|
96
|
-
}
|
|
97
|
-
:host([variant='${unsafeCSS(MainVariant.SECONDARY)}']) .button:disabled {
|
|
98
|
-
outline: 1px solid var(--t-button-text-muted-color);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
:host([variant='${unsafeCSS(MainVariant.SECONDARY)}'][disabled]) .button,
|
|
102
|
-
:host([variant='${unsafeCSS(MainVariant.PRIMARY)}'][disabled]) .button {
|
|
103
|
-
background-color: var(--t-button-disabled-bg-color);
|
|
104
|
-
color: var(--t-button-text-muted-color);
|
|
105
|
-
cursor: not-allowed;
|
|
106
|
-
}
|
|
107
|
-
`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type CustomEventTuixButton = CustomEvent<undefined>;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { LitElement, type TemplateResult } from 'lit';
|
|
2
|
-
import { CheckboxLabelSide } from './enums/tuix-checkbox.enums';
|
|
3
|
-
export declare class TuixCheckbox extends LitElement {
|
|
4
|
-
static styles: import("lit").CSSResult[];
|
|
5
|
-
checked: boolean;
|
|
6
|
-
disabled: boolean;
|
|
7
|
-
dark: boolean;
|
|
8
|
-
error: boolean;
|
|
9
|
-
label: string;
|
|
10
|
-
labelSide: CheckboxLabelSide;
|
|
11
|
-
private _onCheckboxChange;
|
|
12
|
-
private _getIconMode;
|
|
13
|
-
private _getFullContainerClasses;
|
|
14
|
-
protected render(): TemplateResult;
|
|
15
|
-
}
|
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import { classMap } from 'lit/directives/class-map.js';
|
|
5
|
-
import { IconName, IconSizeVariant } from '../tuix-icon/enums/tuix-icon.enums';
|
|
6
|
-
import { TextSize, TextVariant } from '../tuix-text/enums/tuix-text.enums';
|
|
7
|
-
import { checkboxCheckmarkStyles, checkboxContainerStyles, checkboxLabelStyles, hostStyles, } from './TuixCheckbox.styles';
|
|
8
|
-
import { CheckboxIconColorDark, CheckboxIconColorLight, CheckboxIconMode, CheckboxLabelSide, } from './enums/tuix-checkbox.enums';
|
|
9
|
-
let TuixCheckbox = class TuixCheckbox extends LitElement {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
this.checked = false;
|
|
13
|
-
this.disabled = false;
|
|
14
|
-
this.dark = false;
|
|
15
|
-
this.error = false;
|
|
16
|
-
this.label = '';
|
|
17
|
-
this.labelSide = CheckboxLabelSide.RIGHT;
|
|
18
|
-
}
|
|
19
|
-
static { this.styles = [
|
|
20
|
-
hostStyles,
|
|
21
|
-
checkboxContainerStyles,
|
|
22
|
-
checkboxCheckmarkStyles,
|
|
23
|
-
checkboxLabelStyles,
|
|
24
|
-
]; }
|
|
25
|
-
_onCheckboxChange(event) {
|
|
26
|
-
this.dispatchEvent(new CustomEvent('change', {
|
|
27
|
-
detail: {
|
|
28
|
-
value: event.target.checked,
|
|
29
|
-
label: this.label,
|
|
30
|
-
},
|
|
31
|
-
bubbles: true,
|
|
32
|
-
}));
|
|
33
|
-
}
|
|
34
|
-
_getIconMode() {
|
|
35
|
-
if (this.disabled) {
|
|
36
|
-
return CheckboxIconMode.DISABLED;
|
|
37
|
-
}
|
|
38
|
-
if (this.error) {
|
|
39
|
-
return CheckboxIconMode.ERROR;
|
|
40
|
-
}
|
|
41
|
-
return CheckboxIconMode.DEFAULT;
|
|
42
|
-
}
|
|
43
|
-
_getFullContainerClasses() {
|
|
44
|
-
return {
|
|
45
|
-
't-checkbox-full-container': true,
|
|
46
|
-
't-with-error': this.error && !this.disabled,
|
|
47
|
-
't-with-label-left': this.labelSide === CheckboxLabelSide.LEFT,
|
|
48
|
-
};
|
|
49
|
-
}
|
|
50
|
-
render() {
|
|
51
|
-
return html `<label class="${classMap(this._getFullContainerClasses())}">
|
|
52
|
-
<div class="t-checkbox-container">
|
|
53
|
-
<input
|
|
54
|
-
type="checkbox"
|
|
55
|
-
class="t-checkbox"
|
|
56
|
-
.checked="${this.checked}"
|
|
57
|
-
?disabled="${this.disabled}"
|
|
58
|
-
@change="${this._onCheckboxChange}"
|
|
59
|
-
/>
|
|
60
|
-
<div class="t-checkbox-checkmark">
|
|
61
|
-
<tuix-icon
|
|
62
|
-
size="${IconSizeVariant.FULL}"
|
|
63
|
-
name="${IconName.CHECK}"
|
|
64
|
-
color="${this.dark
|
|
65
|
-
? CheckboxIconColorDark[this._getIconMode()]
|
|
66
|
-
: CheckboxIconColorLight[this._getIconMode()]}"
|
|
67
|
-
>
|
|
68
|
-
</tuix-icon>
|
|
69
|
-
</div>
|
|
70
|
-
</div>
|
|
71
|
-
<div class="t-checkbox-label">
|
|
72
|
-
<slot>
|
|
73
|
-
<tuix-text
|
|
74
|
-
size="${TextSize.Field1}"
|
|
75
|
-
color="${TextVariant.PRIMARY}"
|
|
76
|
-
?dark="${this.dark}"
|
|
77
|
-
>
|
|
78
|
-
${this.label}
|
|
79
|
-
</tuix-text>
|
|
80
|
-
</slot>
|
|
81
|
-
</div>
|
|
82
|
-
</label>`;
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
__decorate([
|
|
86
|
-
property({ type: Boolean })
|
|
87
|
-
], TuixCheckbox.prototype, "checked", void 0);
|
|
88
|
-
__decorate([
|
|
89
|
-
property({ type: Boolean, reflect: true })
|
|
90
|
-
], TuixCheckbox.prototype, "disabled", void 0);
|
|
91
|
-
__decorate([
|
|
92
|
-
property({ type: Boolean, reflect: true })
|
|
93
|
-
], TuixCheckbox.prototype, "dark", void 0);
|
|
94
|
-
__decorate([
|
|
95
|
-
property({ type: Boolean, reflect: true })
|
|
96
|
-
], TuixCheckbox.prototype, "error", void 0);
|
|
97
|
-
__decorate([
|
|
98
|
-
property({ type: String })
|
|
99
|
-
], TuixCheckbox.prototype, "label", void 0);
|
|
100
|
-
__decorate([
|
|
101
|
-
property({ type: String })
|
|
102
|
-
], TuixCheckbox.prototype, "labelSide", void 0);
|
|
103
|
-
TuixCheckbox = __decorate([
|
|
104
|
-
customElement('tuix-checkbox')
|
|
105
|
-
], TuixCheckbox);
|
|
106
|
-
export { TuixCheckbox };
|