@descope/web-components-ui 1.0.427 → 1.0.428
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 +0 -1
- package/dist/cjs/index.cjs.js +2520 -5270
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +2022 -4815
- package/dist/index.esm.js.map +1 -1
- package/package.json +7 -15
- package/src/components/descope-apps-list/AppsListClass.js +1 -1
- package/src/components/descope-apps-list/index.js +2 -2
- package/src/components/descope-date-field/descope-calendar/index.js +1 -1
- package/src/components/descope-divider/DividerClass.js +1 -1
- package/src/components/descope-divider/index.js +1 -1
- package/src/components/descope-link/LinkClass.js +1 -1
- package/src/components/descope-link/index.js +1 -1
- package/src/components/descope-security-questions-setup/SecurityQuestionsSetupClass.js +1 -1
- package/src/components/descope-security-questions-setup/index.js +1 -1
- package/src/components/descope-security-questions-verify/SecurityQuestionsVerifyClass.js +1 -1
- package/src/components/descope-security-questions-verify/index.js +1 -1
- package/src/components/descope-user-attribute/UserAttributeClass.js +1 -1
- package/src/components/descope-user-attribute/index.js +1 -1
- package/src/components/descope-user-auth-method/UserAuthMethodClass.js +1 -1
- package/src/components/descope-user-auth-method/index.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/index.js +2 -2
- package/src/components/phone-fields/descope-phone-field/PhoneFieldClass.js +1 -1
- package/src/components/phone-fields/descope-phone-field/descope-phone-field-internal/index.js +1 -1
- package/src/components/phone-fields/descope-phone-field/index.js +1 -1
- package/src/components/phone-fields/descope-phone-input-box-field/index.js +1 -1
- package/src/helpers/themeHelpers/index.js +1 -1
- package/src/theme/components/alert.js +1 -1
- package/src/theme/components/enrichedText.js +1 -1
- package/src/theme/components/index.js +3 -3
- package/dist/index.d.ts +0 -72
- package/node_modules/common/.eslintrc.json +0 -18
- package/node_modules/common/README.md +0 -7
- package/node_modules/common/package.json +0 -37
- package/node_modules/common/project.json +0 -7
- package/node_modules/common/src/baseClasses/baseClasses/createBaseClass.js +0 -66
- package/node_modules/common/src/baseClasses/baseClasses/createBaseInputClass.js +0 -14
- package/node_modules/common/src/baseClasses/baseClasses/createCssVarImageClass.js +0 -55
- package/node_modules/common/src/baseClasses/index.js +0 -3
- package/node_modules/common/src/componentsHelpers/index.js +0 -95
- package/node_modules/common/src/componentsMixins/helpers/mixinsHelpers.js +0 -10
- package/node_modules/common/src/componentsMixins/index.js +0 -1
- package/node_modules/common/src/componentsMixins/mixins/activableMixin.js +0 -14
- package/node_modules/common/src/componentsMixins/mixins/changeMixin.js +0 -22
- package/node_modules/common/src/componentsMixins/mixins/componentNameValidationMixin.js +0 -23
- package/node_modules/common/src/componentsMixins/mixins/componentsContextMixin.js +0 -12
- package/node_modules/common/src/componentsMixins/mixins/createDynamicDataMixin.js +0 -100
- package/node_modules/common/src/componentsMixins/mixins/createProxy.js +0 -58
- package/node_modules/common/src/componentsMixins/mixins/createStyleMixin/helpers.js +0 -106
- package/node_modules/common/src/componentsMixins/mixins/createStyleMixin/index.js +0 -167
- package/node_modules/common/src/componentsMixins/mixins/draggableMixin.js +0 -62
- package/node_modules/common/src/componentsMixins/mixins/externalInputHelpers.js +0 -93
- package/node_modules/common/src/componentsMixins/mixins/externalInputMixin.js +0 -170
- package/node_modules/common/src/componentsMixins/mixins/hoverableMixin.js +0 -13
- package/node_modules/common/src/componentsMixins/mixins/index.js +0 -14
- package/node_modules/common/src/componentsMixins/mixins/inputEventsDispatchingMixin.js +0 -76
- package/node_modules/common/src/componentsMixins/mixins/inputValidationMixin.js +0 -210
- package/node_modules/common/src/componentsMixins/mixins/lifecycleEventsMixin.js +0 -23
- package/node_modules/common/src/componentsMixins/mixins/normalizeBooleanAttributesMixin.js +0 -59
- package/node_modules/common/src/componentsMixins/mixins/portalMixin.js +0 -112
- package/node_modules/common/src/componentsMixins/mixins/proxyInputMixin.js +0 -242
- package/node_modules/common/src/constants.js +0 -4
- package/node_modules/common/src/icons/errorMessageIconBase64.js +0 -1
- package/node_modules/common/src/sbControls.js +0 -302
- package/node_modules/common/src/sbHelpers.js +0 -53
- package/node_modules/common/src/themeHelpers/colorsHelpers.js +0 -94
- package/node_modules/common/src/themeHelpers/componentsThemeManager.js +0 -45
- package/node_modules/common/src/themeHelpers/index.js +0 -191
- package/node_modules/common/src/themeHelpers/resetHelpers.js +0 -144
- package/node_modules/common/src/utils/index.js +0 -68
- package/node_modules/descope-avatar/e2e/descope-avatar.spec.ts +0 -54
- package/node_modules/descope-avatar/package.json +0 -34
- package/node_modules/descope-avatar/project.json +0 -7
- package/node_modules/descope-avatar/src/component/AvatarClass.js +0 -109
- package/node_modules/descope-avatar/src/component/index.js +0 -8
- package/node_modules/descope-avatar/src/theme.js +0 -44
- package/node_modules/descope-avatar/stories/avatar.jpeg +0 -0
- package/node_modules/descope-avatar/stories/descope-avatar.stories.js +0 -32
- package/node_modules/descope-combo-box/e2e/descope-combo-box.spec.ts +0 -462
- package/node_modules/descope-combo-box/package.json +0 -34
- package/node_modules/descope-combo-box/project.json +0 -7
- package/node_modules/descope-combo-box/src/component/ComboBoxClass.js +0 -619
- package/node_modules/descope-combo-box/src/component/index.js +0 -6
- package/node_modules/descope-combo-box/src/theme.js +0 -93
- package/node_modules/descope-combo-box/stories/descope-combo-box.stories.js +0 -180
- package/node_modules/descope-text/e2e/descope-text.spec.ts +0 -35
- package/node_modules/descope-text/package.json +0 -31
- package/node_modules/descope-text/project.json +0 -7
- package/node_modules/descope-text/src/component/TextClass.js +0 -63
- package/node_modules/descope-text/src/component/index.js +0 -5
- package/node_modules/descope-text/src/theme.js +0 -91
- package/node_modules/descope-text/stories/descope-text.stories.js +0 -55
- package/node_modules/theme-globals/package.json +0 -16
- package/node_modules/theme-globals/project.json +0 -7
- package/node_modules/theme-globals/src/index.js +0 -180
- package/node_modules/theme-input-wrapper/package.json +0 -17
- package/node_modules/theme-input-wrapper/project.json +0 -7
- package/node_modules/theme-input-wrapper/src/index.js +0 -130
- package/src/index.d.ts +0 -72
@@ -1,53 +0,0 @@
|
|
1
|
-
export const withForm = (children) => {
|
2
|
-
return `
|
3
|
-
<form onsubmit="event.preventDefault()">
|
4
|
-
<div>${children}</div>
|
5
|
-
<div style="margin-top: 6em">
|
6
|
-
<button type="submit" data-testid="submit-button">Submit</button>
|
7
|
-
</div>
|
8
|
-
</form>
|
9
|
-
`;
|
10
|
-
};
|
11
|
-
|
12
|
-
export const appleIcon = `
|
13
|
-
<svg
|
14
|
-
width="1.5em"
|
15
|
-
height="1.5em"
|
16
|
-
viewBox="0 0 800 1000"
|
17
|
-
xmlns="http://www.w3.org/2000/svg"
|
18
|
-
fill="white"
|
19
|
-
data-icon="apple"
|
20
|
-
>
|
21
|
-
<path
|
22
|
-
d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"
|
23
|
-
/>
|
24
|
-
</svg>`;
|
25
|
-
|
26
|
-
export const fingerprintBase64 = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzI4NDRfMTE0Mzk0IiBzdHlsZT0ibWFzay10eXBlOmFscGhhIiBtYXNrVW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPgo8cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiNEOUQ5RDkiLz4KPC9tYXNrPgo8ZyBtYXNrPSJ1cmwoI21hc2swXzI4NDRfMTE0Mzk0KSI+CjxwYXRoIGQ9Ik01LjMzMjc3IDE2LjA4M0M1LjEzODc3IDE1Ljk3MjMgNS4wMjA3NyAxNS44MTI3IDQuOTc4NzcgMTUuNjA0QzQuOTM3NDQgMTUuMzk2IDQuOTcyMTEgMTUuMTk0NyA1LjA4Mjc3IDE1QzYuNzc3NDQgMTIuNTU1MyA4Ljk1MTExIDEwLjY1OTcgMTEuNjAzOCA5LjMxMzAxQzE0LjI1NjQgNy45NjU2NyAxNy4wODI4IDcuMjkyMDEgMjAuMDgyOCA3LjI5MjAxQzIzLjA1NTQgNy4yOTIwMSAyNS44NjExIDcuOTM3NjcgMjguNDk5OCA5LjIyOTAxQzMxLjEzODQgMTAuNTIxIDMzLjMxOTEgMTIuMzYxMyAzNS4wNDE4IDE0Ljc1QzM1LjIwODQgMTUgMzUuMjYzOCAxNS4yMjIzIDM1LjIwNzggMTUuNDE3QzM1LjE1MjQgMTUuNjExIDM1LjA0MTQgMTUuNzc3NyAzNC44NzQ4IDE1LjkxN0MzNC43MzYxIDE2LjA1NTcgMzQuNTU1NCAxNi4xMTggMzQuMzMyOCAxNi4xMDRDMzQuMTEwOCAxNi4wOSAzMy45MTY0IDE1Ljk3MiAzMy43NDk4IDE1Ljc1QzMyLjIyMTggMTMuNTU1MyAzMC4yNDI0IDExLjg3NDcgMjcuODExOCAxMC43MDhDMjUuMzgxOCA5LjU0MTM0IDIyLjgwNTQgOC45NDQzNCAyMC4wODI4IDguOTE3MDFDMTcuMzYwOCA4LjkxNzAxIDE0Ljc5ODQgOS41MDczNCAxMi4zOTU4IDEwLjY4OEM5Ljk5MzExIDExLjg2OCA4LjAyNzc3IDEzLjU1NTMgNi40OTk3NyAxNS43NUM2LjMwNTExIDE2IDYuMTAzNzcgMTYuMTQ2IDUuODk1NzcgMTYuMTg4QzUuNjg3MTEgMTYuMjI5MyA1LjQ5OTQ0IDE2LjE5NDMgNS4zMzI3NyAxNi4wODNaTTI1LjIwNzggMzdDMjIuMDk3MSAzNi4zMDUzIDE5LjYxODEgMzQuODQ3IDE3Ljc3MDggMzIuNjI1QzE1LjkyMzQgMzAuNDAzIDE0Ljk5OTggMjcuNzM2MyAxNC45OTk4IDI0LjYyNUMxNC45OTk4IDIzLjIwODMgMTUuNDk5OCAyMi4wMTQgMTYuNDk5OCAyMS4wNDJDMTcuNDk5OCAyMC4wNjkzIDE4LjY5NDEgMTkuNTgzIDIwLjA4MjggMTkuNTgzQzIxLjQ5OTQgMTkuNTgzIDIyLjcwNzggMjAuMDU1MyAyMy43MDc4IDIxQzI0LjcwNzggMjEuOTQ0NyAyNS4yMDc4IDIzLjExMTMgMjUuMjA3OCAyNC41QzI1LjIwNzggMjUuNDQ0NyAyNS41NTUxIDI2LjI1MDMgMjYuMjQ5OCAyNi45MTdDMjYuOTQ0NCAyNy41ODM3IDI3Ljc3NzggMjcuOTE3IDI4Ljc0OTggMjcuOTE3QzI5LjY5NDQgMjcuOTE3IDMwLjUwMDEgMjcuNTgzNyAzMS4xNjY4IDI2LjkxN0MzMS44MzM0IDI2LjI1MDMgMzIuMTY2OCAyNS40NDQ3IDMyLjE2NjggMjQuNUMzMi4xNjY4IDIxLjI1IDMwLjk4NjEgMTguNTIwNyAyOC42MjQ4IDE2LjMxMkMyNi4yNjM0IDE0LjEwNCAyMy40MTYxIDEzIDIwLjA4MjggMTNDMTYuNzQ5NCAxMyAxMy45MDkxIDE0LjEyNSAxMS41NjE4IDE2LjM3NUM5LjIxNTExIDE4LjYyNSA4LjA0MTc3IDIxLjM3NSA4LjA0MTc3IDI0LjYyNUM4LjA0MTc3IDI1LjUxMzcgOC4xMTgxMSAyNi40NTggOC4yNzA3NyAyNy40NThDOC40MjM0NCAyOC40NTggOC42OTQxMSAyOS41MTM3IDkuMDgyNzcgMzAuNjI1QzkuMTY2MTEgMzAuODc1IDkuMTY2MTEgMzEuMDgzMyA5LjA4Mjc3IDMxLjI1QzguOTk5NDQgMzEuNDE2NyA4Ljg2MDc3IDMxLjU0MTcgOC42NjY3NyAzMS42MjVDOC40NDQxMSAzMS43MDgzIDguMjI4NzcgMzEuNzE1MyA4LjAyMDc3IDMxLjY0NkM3LjgxMjExIDMxLjU3NjcgNy42NTI0NCAzMS40MDMgNy41NDE3NyAzMS4xMjVDNy4yMDg0NCAzMC4yMzYzIDYuOTQ0NDQgMjkuMjM2MyA2Ljc0OTc3IDI4LjEyNUM2LjU1NTExIDI3LjAxMzcgNi40NTc3NyAyNS44NDcgNi40NTc3NyAyNC42MjVDNi40NTc3NyAyMC45NTgzIDcuNzk4MTEgMTcuODI2MyAxMC40Nzg4IDE1LjIyOUMxMy4xNTk0IDEyLjYzMTcgMTYuMzYwOCAxMS4zMzMgMjAuMDgyOCAxMS4zMzNDMjMuODYwOCAxMS4zMzMgMjcuMDkwMSAxMi42MDQgMjkuNzcwOCAxNS4xNDZDMzIuNDUxNCAxNy42ODczIDMzLjc5MTggMjAuODA1MyAzMy43OTE4IDI0LjVDMzMuNzkxOCAyNS44ODg3IDMzLjI5ODQgMjcuMDY5MyAzMi4zMTE4IDI4LjA0MkMzMS4zMjU4IDI5LjAxNCAzMC4xMzg0IDI5LjUgMjguNzQ5OCAyOS41QzI3LjMwNTEgMjkuNSAyNi4wODI4IDI5LjAyNzcgMjUuMDgyOCAyOC4wODNDMjQuMDgyOCAyNy4xMzkgMjMuNTgyOCAyNS45ODYzIDIzLjU4MjggMjQuNjI1QzIzLjU4MjggMjMuNjUzIDIzLjI0MjQgMjIuODMzNyAyMi41NjE4IDIyLjE2N0MyMS44ODE4IDIxLjUwMDMgMjEuMDU1NCAyMS4xNjcgMjAuMDgyOCAyMS4xNjdDMTkuMTM4OCAyMS4xNjcgMTguMzI2NCAyMS41MDAzIDE3LjY0NTggMjIuMTY3QzE2Ljk2NTEgMjIuODMzNyAxNi42MjQ4IDIzLjY1MyAxNi42MjQ4IDI0LjYyNUMxNi42MjQ4IDI3LjQwMyAxNy40MzA0IDI5LjczNjMgMTkuMDQxOCAzMS42MjVDMjAuNjUyNCAzMy41MTM3IDIyLjg0NjggMzQuODA1MyAyNS42MjQ4IDM1LjVDMjUuODc0OCAzNS41NTUzIDI2LjA0MTQgMzUuNjY2MyAyNi4xMjQ4IDM1LjgzM0MyNi4yMDgxIDM1Ljk5OTcgMjYuMjM1OCAzNi4xOTQzIDI2LjIwNzggMzYuNDE3QzI2LjE1MjQgMzYuNjExIDI2LjA0ODQgMzYuNzcwNyAyNS44OTU4IDM2Ljg5NkMyNS43NDMxIDM3LjAyMDcgMjUuNTEzOCAzNy4wNTUzIDI1LjIwNzggMzdaTTEwLjQ5OTggNy4xNjcwMUMxMC4yNDk4IDcuMzA1NjcgMTAuMDM0NCA3LjM0MDM0IDkuODUzNzcgNy4yNzEwMUM5LjY3MzExIDcuMjAxNjcgOS41Mjc0NCA3LjA4MzY3IDkuNDE2NzcgNi45MTcwMUM5LjMwNTQ0IDYuNzc3NjcgOS4yNzA0NCA2LjU5MDAxIDkuMzExNzcgNi4zNTQwMUM5LjM1Mzc3IDYuMTE4MDEgOS40NzIxMSA1Ljk1ODM0IDkuNjY2NzcgNS44NzUwMUMxMS4yNzc0IDQuOTU4MzQgMTIuOTY0OCA0LjI4NDY3IDE0LjcyODggMy44NTQwMUMxNi40OTI4IDMuNDIzMzQgMTguMjc3NCAzLjIwODAxIDIwLjA4MjggMy4yMDgwMUMyMS45MTYxIDMuMjA4MDEgMjMuNzAxMSAzLjQyMzM0IDI1LjQzNzggMy44NTQwMUMyNy4xNzM4IDQuMjg0NjcgMjguODMzNCA0LjkxNjY3IDMwLjQxNjggNS43NTAwMUMzMC42NjY4IDUuODYxMzQgMzAuODEyNCA2LjAyMTAxIDMwLjg1MzggNi4yMjkwMUMzMC44OTU4IDYuNDM3NjcgMzAuODc1MSA2LjYyNTM0IDMwLjc5MTggNi43OTIwMUMzMC43MDg0IDYuOTg2MDEgMzAuNTY5NCA3LjEzMTY3IDMwLjM3NDggNy4yMjkwMUMzMC4xODAxIDcuMzI2MzQgMjkuOTU3OCA3LjMwNTY3IDI5LjcwNzggNy4xNjcwMUMyOC4yMzU4IDYuNDE3MDEgMjYuNjg3MSA1LjgzMzY3IDI1LjA2MTggNS40MTcwMUMyMy40MzcxIDUuMDAwMzQgMjEuNzc3NCA0Ljc5MjAxIDIwLjA4MjggNC43OTIwMUMxOC40MTYxIDQuNzkyMDEgMTYuNzcwNCA0Ljk4NjM0IDE1LjE0NTggNS4zNzUwMUMxMy41MjA0IDUuNzYzNjcgMTEuOTcxOCA2LjM2MTAxIDEwLjQ5OTggNy4xNjcwMVpNMTUuNjY2OCAzNi4zMzNDMTQuMDU1NCAzNC42NjYzIDEyLjgzMzEgMzIuODk1NyAxMS45OTk4IDMxLjAyMUMxMS4xNjY0IDI5LjE0NTcgMTAuNzQ5OCAyNy4wMTM3IDEwLjc0OTggMjQuNjI1QzEwLjc0OTggMjIuMDY5NyAxMS42NTk0IDE5LjkwMyAxMy40Nzg4IDE4LjEyNUMxNS4yOTgxIDE2LjM0NyAxNy40OTk0IDE1LjQ1OCAyMC4wODI4IDE1LjQ1OEMyMi42NjYxIDE1LjQ1OCAyNC44ODg0IDE2LjMzMyAyNi43NDk4IDE4LjA4M0MyOC42MTExIDE5LjgzMyAyOS41NDE4IDIxLjk3MiAyOS41NDE4IDI0LjVDMjkuNTQxOCAyNC43NzggMjkuNDcyMSAyNC45OTMzIDI5LjMzMjggMjUuMTQ2QzI5LjE5NDEgMjUuMjk4NyAyOC45OTk4IDI1LjM3NSAyOC43NDk4IDI1LjM3NUMyOC40NzE4IDI1LjM3NSAyOC4yNTY0IDI1LjI5ODcgMjguMTAzOCAyNS4xNDZDMjcuOTUxMSAyNC45OTMzIDI3Ljg3NDggMjQuNzc4IDI3Ljg3NDggMjQuNUMyNy44NzQ4IDIyLjM4ODcgMjcuMTEwOCAyMC42MTggMjUuNTgyOCAxOS4xODhDMjQuMDU1NCAxNy43NTczIDIyLjIyMjEgMTcuMDQyIDIwLjA4MjggMTcuMDQyQzE3Ljk0NDEgMTcuMDQyIDE2LjEyNDggMTcuNzc4IDE0LjYyNDggMTkuMjVDMTMuMTI0OCAyMC43MjIgMTIuMzc0OCAyMi41MTM3IDEyLjM3NDggMjQuNjI1QzEyLjM3NDggMjYuODQ3IDEyLjczNTggMjguNzcwNyAxMy40NTc4IDMwLjM5NkMxNC4xODA0IDMyLjAyMDcgMTUuMzE5NCAzMy42Mzg3IDE2Ljg3NDggMzUuMjVDMTcuMDY5NCAzNS40NDQ3IDE3LjE1OTggMzUuNjM5IDE3LjE0NTggMzUuODMzQzE3LjEzMTggMzYuMDI3NyAxNy4wNjkxIDM2LjIwODMgMTYuOTU3OCAzNi4zNzVDMTYuODE5MSAzNi41NDE3IDE2LjYxNzggMzYuNjI1IDE2LjM1MzggMzYuNjI1QzE2LjA4OTggMzYuNjI1IDE1Ljg2MDggMzYuNTI3NyAxNS42NjY4IDM2LjMzM1pNMjguNzkxOCAzMy41QzI2LjE4MDQgMzMuNSAyMy45NDQxIDMyLjY5NDMgMjIuMDgyOCAzMS4wODNDMjAuMjIyMSAyOS40NzIzIDE5LjI5MTggMjcuMjkyIDE5LjI5MTggMjQuNTQyQzE5LjI5MTggMjQuMjkyIDE5LjM2MTEgMjQuMDgzNyAxOS40OTk4IDIzLjkxN0MxOS42Mzg0IDIzLjc1MDMgMTkuODMyOCAyMy42NjcgMjAuMDgyOCAyMy42NjdDMjAuMzMyOCAyMy42NjcgMjAuNTI3NCAyMy43NTAzIDIwLjY2NjggMjMuOTE3QzIwLjgwNTQgMjQuMDgzNyAyMC44NzQ4IDI0LjI5MiAyMC44NzQ4IDI0LjU0MkMyMC44NzQ4IDI2Ljg0NzMgMjEuNjU5NCAyOC42NTI3IDIzLjIyODggMjkuOTU4QzI0Ljc5ODEgMzEuMjY0IDI2LjY1MjQgMzEuOTE3IDI4Ljc5MTggMzEuOTE3QzI5LjA0MTggMzEuOTE3IDI5LjMzMzQgMzEuODk2IDI5LjY2NjggMzEuODU0QzMwLjAwMDEgMzEuODEyNyAzMC4zMzM0IDMxLjc3OCAzMC42NjY4IDMxLjc1QzMwLjg4ODggMzEuNzIyIDMxLjA3NjEgMzEuNzc3NyAzMS4yMjg4IDMxLjkxN0MzMS4zODE0IDMyLjA1NTcgMzEuNDU3OCAzMi4yMDgzIDMxLjQ1NzggMzIuMzc1QzMxLjQ4NTggMzIuNTk3IDMxLjQ0NDEgMzIuNzc3NyAzMS4zMzI4IDMyLjkxN0MzMS4yMjIxIDMzLjA1NTcgMzEuMDgzNCAzMy4xNTI3IDMwLjkxNjggMzMuMjA4QzMwLjQ3MjEgMzMuMzQ3MyAzMC4wNTU0IDMzLjQzMDcgMjkuNjY2OCAzMy40NThDMjkuMjc3NCAzMy40ODYgMjguOTg1OCAzMy41IDI4Ljc5MTggMzMuNVoiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPC9zdmc+Cg==`;
|
27
|
-
|
28
|
-
export const googleIcon = `
|
29
|
-
<svg
|
30
|
-
width="1.5em"
|
31
|
-
height="1.5em"
|
32
|
-
viewBox="0 0 20 20"
|
33
|
-
xmlns="http://www.w3.org/2000/svg"
|
34
|
-
fill=""
|
35
|
-
data-icon="google"
|
36
|
-
>
|
37
|
-
<path
|
38
|
-
d="m19.6 10.2274c0-.70912-.0636-1.39092-.1818-2.04552h-9.4182v3.86822h5.3818c-.2318 1.25-.9363 2.3091-1.9954 3.0182v2.5091h3.2318c1.8909-1.7409 2.9818-4.3046 2.9818-7.35z"
|
39
|
-
fill="#4285f4"
|
40
|
-
/>
|
41
|
-
<path
|
42
|
-
d="m10 19.9999c2.7 0 4.9636-.8955 6.6181-2.4227l-3.2318-2.5091c-.8954.6-2.0409.9545-3.3863.9545-2.6046 0-4.8091-1.7591-5.5955-4.1227h-3.3409v2.5909c1.6455 3.2682 5.0273 5.5091 8.9364 5.5091z"
|
43
|
-
fill="#34a853"
|
44
|
-
/>
|
45
|
-
<path
|
46
|
-
d="m4.4045 11.8999c-.2-.6-.3136-1.2409-.3136-1.89997 0-.6591.1136-1.3.3136-1.9v-2.5909h-3.3409c-.6772 1.35-1.0636 2.8773-1.0636 4.4909 0 1.61357.3864 3.14087 1.0636 4.49087z"
|
47
|
-
fill="#fbbc04"
|
48
|
-
/>
|
49
|
-
<path
|
50
|
-
d="m10 3.9773c1.4681 0 2.7863.5045 3.8227 1.4954l2.8682-2.8682c-1.7318-1.6136-3.9955-2.6045-6.6909-2.6045-3.9091 0-7.2909 2.2409-8.9364 5.5091l3.3409 2.5909c.7864-2.3636 2.9909-4.1227 5.5955-4.1227z"
|
51
|
-
fill="#e94235"
|
52
|
-
/>
|
53
|
-
</svg>`;
|
@@ -1,94 +0,0 @@
|
|
1
|
-
import Color from 'color';
|
2
|
-
|
3
|
-
const colorGaps = {
|
4
|
-
darkLight: 0.4,
|
5
|
-
highlight: 0.8,
|
6
|
-
contrast: 1,
|
7
|
-
edgeColor: {
|
8
|
-
darkLight: 0.25,
|
9
|
-
highlight: 0.1,
|
10
|
-
},
|
11
|
-
};
|
12
|
-
|
13
|
-
const darken = (c, percentage) => c.darken(percentage).hex();
|
14
|
-
|
15
|
-
const contrast = (c) => {
|
16
|
-
const isDark = c.isDark();
|
17
|
-
return c
|
18
|
-
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
19
|
-
.saturate(1)
|
20
|
-
.hex();
|
21
|
-
};
|
22
|
-
|
23
|
-
const lighten = (c, percentage) => {
|
24
|
-
const isDark = c.lightness() < 0.5;
|
25
|
-
|
26
|
-
if (isDark) {
|
27
|
-
return c.lightness(percentage * 100).hex();
|
28
|
-
}
|
29
|
-
|
30
|
-
return c.lighten(percentage).hex();
|
31
|
-
};
|
32
|
-
|
33
|
-
const isNearBlack = (color) => color.luminosity() < 0.01;
|
34
|
-
const isNearWhite = (color) => color.luminosity() > 0.99;
|
35
|
-
|
36
|
-
const generateDarkColor = (color, theme) => {
|
37
|
-
if (theme === 'dark') {
|
38
|
-
return isNearWhite(color)
|
39
|
-
? darken(color, colorGaps.edgeColor.darkLight)
|
40
|
-
: lighten(color, colorGaps.darkLight);
|
41
|
-
}
|
42
|
-
|
43
|
-
return isNearBlack(color)
|
44
|
-
? lighten(color, colorGaps.edgeColor.darkLight)
|
45
|
-
: darken(color, colorGaps.darkLight);
|
46
|
-
};
|
47
|
-
|
48
|
-
const generateLightColor = (color, theme) => {
|
49
|
-
if (theme === 'dark') {
|
50
|
-
return isNearBlack(color)
|
51
|
-
? lighten(color, colorGaps.edgeColor.darkLight)
|
52
|
-
: darken(color, colorGaps.darkLight);
|
53
|
-
}
|
54
|
-
|
55
|
-
return isNearWhite(color)
|
56
|
-
? darken(color, colorGaps.edgeColor.darkLight)
|
57
|
-
: lighten(color, colorGaps.darkLight);
|
58
|
-
};
|
59
|
-
|
60
|
-
const generateHighlightColor = (color, theme) => {
|
61
|
-
if (theme === 'dark') {
|
62
|
-
return isNearBlack(color)
|
63
|
-
? lighten(color, colorGaps.edgeColor.highlight)
|
64
|
-
: darken(color, colorGaps.highlight);
|
65
|
-
}
|
66
|
-
|
67
|
-
return isNearWhite(color)
|
68
|
-
? darken(color, colorGaps.edgeColor.highlight)
|
69
|
-
: lighten(color, colorGaps.highlight);
|
70
|
-
};
|
71
|
-
|
72
|
-
export const genColor = (color, theme) => {
|
73
|
-
const mainColor = new Color(color.main || color);
|
74
|
-
|
75
|
-
const res = {
|
76
|
-
main: mainColor.hex(),
|
77
|
-
dark: color.dark || generateDarkColor(mainColor, theme),
|
78
|
-
light: color.light || generateLightColor(mainColor, theme),
|
79
|
-
highlight: color.highlight || generateHighlightColor(mainColor, theme),
|
80
|
-
contrast: color.contrast || contrast(mainColor),
|
81
|
-
};
|
82
|
-
|
83
|
-
return res;
|
84
|
-
};
|
85
|
-
|
86
|
-
export const genColors = (colors) => {
|
87
|
-
return Object.keys(colors).reduce((acc, colorName) => {
|
88
|
-
const currentColor = colors[colorName];
|
89
|
-
|
90
|
-
return Object.assign(acc, {
|
91
|
-
[colorName]: genColor(currentColor),
|
92
|
-
});
|
93
|
-
}, {});
|
94
|
-
};
|
@@ -1,45 +0,0 @@
|
|
1
|
-
class ComponentsThemeManager {
|
2
|
-
static mountOnPropName = 'DescopeThemeManager';
|
3
|
-
|
4
|
-
#themes = {};
|
5
|
-
|
6
|
-
#currentThemeName = 'light';
|
7
|
-
|
8
|
-
#callbacks = new Set();
|
9
|
-
|
10
|
-
#notify() {
|
11
|
-
this.#callbacks.forEach((cb) => cb?.());
|
12
|
-
}
|
13
|
-
|
14
|
-
get currentThemeName() {
|
15
|
-
return this.#currentThemeName;
|
16
|
-
}
|
17
|
-
|
18
|
-
set currentThemeName(themeName) {
|
19
|
-
this.#currentThemeName = themeName;
|
20
|
-
this.#notify();
|
21
|
-
}
|
22
|
-
|
23
|
-
get currentTheme() {
|
24
|
-
return this.#themes[this.currentThemeName];
|
25
|
-
}
|
26
|
-
|
27
|
-
onCurrentThemeChange(cb) {
|
28
|
-
this.#callbacks.add(cb);
|
29
|
-
|
30
|
-
return () => {
|
31
|
-
this.#callbacks.delete(cb);
|
32
|
-
};
|
33
|
-
}
|
34
|
-
|
35
|
-
set themes(themes) {
|
36
|
-
this.#themes = themes;
|
37
|
-
this.#notify();
|
38
|
-
}
|
39
|
-
|
40
|
-
get hasThemes() {
|
41
|
-
return !!Object.keys(this.#themes).length;
|
42
|
-
}
|
43
|
-
}
|
44
|
-
|
45
|
-
export const componentsThemeManager = new ComponentsThemeManager();
|
@@ -1,191 +0,0 @@
|
|
1
|
-
import merge from 'lodash.merge';
|
2
|
-
import {
|
3
|
-
BASE_THEME_SECTION,
|
4
|
-
DESCOPE_PREFIX,
|
5
|
-
PORTAL_THEME_PREFIX,
|
6
|
-
} from '../constants';
|
7
|
-
import { isUrl, kebabCase } from '../utils';
|
8
|
-
import { getComponentName, getCssVarName } from '../componentsHelpers';
|
9
|
-
|
10
|
-
const getVarName = (path) => getCssVarName(DESCOPE_PREFIX, ...path);
|
11
|
-
|
12
|
-
// lodash.set alternative
|
13
|
-
const set = (obj, path, value) => {
|
14
|
-
const pathArray = Array.isArray(path) ? path : path.match(/([^[.\]])+/g);
|
15
|
-
|
16
|
-
pathArray.reduce((acc, key, i) => {
|
17
|
-
if (acc[key] === undefined) acc[key] = {};
|
18
|
-
if (i === pathArray.length - 1) acc[key] = value;
|
19
|
-
return acc[key];
|
20
|
-
}, obj);
|
21
|
-
|
22
|
-
return obj;
|
23
|
-
};
|
24
|
-
|
25
|
-
const transformTheme = (theme, path, getTransformation) => {
|
26
|
-
return Object.entries(theme).reduce((acc, [key, val]) => {
|
27
|
-
if (val?.constructor !== Object) {
|
28
|
-
return merge(acc, getTransformation(path.concat(key), val));
|
29
|
-
}
|
30
|
-
return merge(acc, transformTheme(val, [...path, key], getTransformation));
|
31
|
-
}, {});
|
32
|
-
};
|
33
|
-
|
34
|
-
const stringifyArray = (strArr) =>
|
35
|
-
strArr.map((str) => (str.includes(' ') ? `"${str}"` : str)).join(', ');
|
36
|
-
|
37
|
-
const getCssVarValue = (val) => {
|
38
|
-
switch (true) {
|
39
|
-
case Array.isArray(val):
|
40
|
-
return stringifyArray(val);
|
41
|
-
case isUrl(val):
|
42
|
-
return `url(${val})`;
|
43
|
-
default:
|
44
|
-
return val;
|
45
|
-
}
|
46
|
-
};
|
47
|
-
|
48
|
-
export const themeToCSSVarsObj = (theme) =>
|
49
|
-
transformTheme(theme, [], (path, val) => ({
|
50
|
-
[getVarName(path)]: getCssVarValue(val),
|
51
|
-
}));
|
52
|
-
|
53
|
-
export const getThemeRefs = (theme, prefix) =>
|
54
|
-
transformTheme(theme, [], (path) =>
|
55
|
-
set({}, path, `var(${getVarName(prefix ? [prefix, ...path] : path)})`),
|
56
|
-
);
|
57
|
-
|
58
|
-
export const getThemeVars = (theme, prefix) =>
|
59
|
-
transformTheme(theme, [], (path) =>
|
60
|
-
set({}, path, getVarName(prefix ? [prefix, ...path] : path)),
|
61
|
-
);
|
62
|
-
|
63
|
-
export const globalsThemeToStyle = (theme, themeName = '') => {
|
64
|
-
const style = Object.entries(themeToCSSVarsObj(theme)).reduce(
|
65
|
-
(acc, entry) => `${acc}${entry.join(':')};\n`,
|
66
|
-
'',
|
67
|
-
);
|
68
|
-
|
69
|
-
if (!themeName) return style;
|
70
|
-
|
71
|
-
return `*[data-theme="${themeName}"] {${style}}`;
|
72
|
-
};
|
73
|
-
|
74
|
-
const componentsThemeToStyleObj = (componentsTheme) =>
|
75
|
-
transformTheme(componentsTheme, [], (path, val) => {
|
76
|
-
const [component, ...restPath] = path;
|
77
|
-
const property = restPath.pop();
|
78
|
-
const componentName = getComponentName(component);
|
79
|
-
|
80
|
-
if (property === 'undefined') {
|
81
|
-
// eslint-disable-next-line no-console
|
82
|
-
console.warn(
|
83
|
-
componentName,
|
84
|
-
`theme value: "${val}" is mapped to an invalid property`,
|
85
|
-
);
|
86
|
-
}
|
87
|
-
|
88
|
-
// we need a support for portal components theme (e.g. overlay)
|
89
|
-
// this allows us to generate those themes under different sections
|
90
|
-
// if the theme has root level attribute that starts with #
|
91
|
-
// we are generating a new theme
|
92
|
-
let themeName = BASE_THEME_SECTION;
|
93
|
-
|
94
|
-
if (restPath[0] && restPath[0].startsWith(PORTAL_THEME_PREFIX)) {
|
95
|
-
themeName = restPath.shift();
|
96
|
-
}
|
97
|
-
|
98
|
-
// do not start with underscore -> key:value, must have 2 no underscore attrs in a row
|
99
|
-
// starts with underscore -> attribute selector
|
100
|
-
const attrsSelector = restPath.reduce((acc, section, idx) => {
|
101
|
-
if (section.startsWith('_'))
|
102
|
-
return `${acc}[${kebabCase(section.replace(/^_/, ''))}="true"]`;
|
103
|
-
|
104
|
-
const nextSection = restPath[idx + 1];
|
105
|
-
|
106
|
-
if (typeof nextSection !== 'string' || nextSection.startsWith('_')) {
|
107
|
-
// eslint-disable-next-line no-console
|
108
|
-
console.error(
|
109
|
-
'theme generator',
|
110
|
-
`your theme structure is invalid, attribute "${section}" is followed by "${nextSection}" which is not allowed`,
|
111
|
-
);
|
112
|
-
return acc;
|
113
|
-
}
|
114
|
-
|
115
|
-
return `${acc}[${kebabCase(section)}="${restPath
|
116
|
-
.splice(idx + 1, 1)
|
117
|
-
.join('')}"]`;
|
118
|
-
}, '');
|
119
|
-
|
120
|
-
const selector = `:host${attrsSelector ? `(${attrsSelector})` : ''}`;
|
121
|
-
|
122
|
-
return {
|
123
|
-
[componentName]: {
|
124
|
-
[themeName]: {
|
125
|
-
[selector]: {
|
126
|
-
[property]: getCssVarValue(val),
|
127
|
-
},
|
128
|
-
},
|
129
|
-
},
|
130
|
-
};
|
131
|
-
});
|
132
|
-
|
133
|
-
const componentsThemeToStyle = (componentsTheme) =>
|
134
|
-
Object.entries(componentsTheme).reduce(
|
135
|
-
(acc, [selector, vars]) =>
|
136
|
-
`${acc}${selector} { \n${Object.entries(vars)
|
137
|
-
.map(([key, val]) => `${key}: ${val}`)
|
138
|
-
.join(';\n')} \n}\n\n`,
|
139
|
-
'',
|
140
|
-
);
|
141
|
-
|
142
|
-
export const createComponentsTheme = (componentsTheme) => {
|
143
|
-
const styleObj = componentsThemeToStyleObj(componentsTheme);
|
144
|
-
|
145
|
-
return Object.keys(styleObj).reduce((acc, componentName) => {
|
146
|
-
const componentThemes = styleObj[componentName];
|
147
|
-
|
148
|
-
return Object.assign(acc, {
|
149
|
-
[componentName]: Object.keys(componentThemes).reduce(
|
150
|
-
(res, theme) =>
|
151
|
-
Object.assign(res, {
|
152
|
-
[theme]: componentsThemeToStyle(componentThemes[theme]),
|
153
|
-
}),
|
154
|
-
{},
|
155
|
-
),
|
156
|
-
});
|
157
|
-
}, {});
|
158
|
-
};
|
159
|
-
|
160
|
-
export const themeToStyle = ({ globals, components }, themeName) => ({
|
161
|
-
globals: globalsThemeToStyle(globals, themeName),
|
162
|
-
components: createComponentsTheme(components),
|
163
|
-
});
|
164
|
-
|
165
|
-
// allows to generate css variables with nested fallbacks
|
166
|
-
export const useVar = (...varNames) => {
|
167
|
-
return varNames.reduceRight((acc, value) => {
|
168
|
-
if (value.startsWith('--')) return `var(${value}${acc ? `, ${acc}` : acc})`;
|
169
|
-
|
170
|
-
return `${value}${acc ? `, ${acc}` : acc}`;
|
171
|
-
}, '');
|
172
|
-
};
|
173
|
-
|
174
|
-
export const createHelperVars = (theme, prefix) => {
|
175
|
-
const res = transformTheme(theme, [], (path, value) => {
|
176
|
-
const modifiedPath = [...path];
|
177
|
-
const property = modifiedPath.splice(-1);
|
178
|
-
const varName = getCssVarName(prefix, property);
|
179
|
-
|
180
|
-
const vars = { [property]: varName };
|
181
|
-
const useVars = { [property]: useVar(varName) };
|
182
|
-
|
183
|
-
return { theme: set({}, [...modifiedPath, varName], value), useVars, vars };
|
184
|
-
});
|
185
|
-
|
186
|
-
return [res.theme, res.useVars, res.vars];
|
187
|
-
};
|
188
|
-
|
189
|
-
export { componentsThemeManager } from './componentsThemeManager';
|
190
|
-
export * from './colorsHelpers';
|
191
|
-
export * from './resetHelpers';
|
@@ -1,144 +0,0 @@
|
|
1
|
-
export const useHostExternalPadding = (cssVarList) => `
|
2
|
-
:host {
|
3
|
-
padding: calc(var(${cssVarList.inputOutlineWidth}) + var(${cssVarList.inputOutlineOffset}))
|
4
|
-
}
|
5
|
-
`;
|
6
|
-
|
7
|
-
export const resetInputFieldUnderlayingBorder = (name) => `
|
8
|
-
${name}::part(input-field)::after {
|
9
|
-
border: none;
|
10
|
-
}
|
11
|
-
`;
|
12
|
-
|
13
|
-
export const resetInitialHeight = (name) => `
|
14
|
-
${name}::before {
|
15
|
-
height: unset;
|
16
|
-
}
|
17
|
-
`;
|
18
|
-
|
19
|
-
export const resetInputElement = (name) => `
|
20
|
-
${name} > input {
|
21
|
-
-webkit-mask-image: none;
|
22
|
-
min-height: 0;
|
23
|
-
box-sizing: border-box;
|
24
|
-
}
|
25
|
-
`;
|
26
|
-
|
27
|
-
export const resetInputContainer = (name) => `
|
28
|
-
${name} {
|
29
|
-
margin: 0;
|
30
|
-
padding: 0;
|
31
|
-
width: 100%;
|
32
|
-
height: 100%;
|
33
|
-
box-sizing: border-box;
|
34
|
-
}
|
35
|
-
`;
|
36
|
-
|
37
|
-
export const resetInputField = (name) => `
|
38
|
-
${name}::part(input-field) {
|
39
|
-
overflow: hidden;
|
40
|
-
padding: 0;
|
41
|
-
box-shadow: none;
|
42
|
-
}
|
43
|
-
`;
|
44
|
-
|
45
|
-
export const resetInputCursor = (name) => `
|
46
|
-
${name} > label,
|
47
|
-
${name}::part(label),
|
48
|
-
${name}::part(required-indicator) {
|
49
|
-
cursor: pointer;
|
50
|
-
}
|
51
|
-
`;
|
52
|
-
|
53
|
-
export const resetInputPlaceholder = (name, ele = 'input') => `
|
54
|
-
${name}[disabled] > ${ele}:placeholder-shown,
|
55
|
-
${name}[readonly] > ${ele}:placeholder-shown {
|
56
|
-
opacity: 1;
|
57
|
-
}
|
58
|
-
`;
|
59
|
-
|
60
|
-
export const resetInputAutoFill = (name, cssVarList) => `
|
61
|
-
${name} input:-webkit-autofill,
|
62
|
-
${name} input:-webkit-autofill::first-line,
|
63
|
-
${name} input:-webkit-autofill:hover,
|
64
|
-
${name} input:-webkit-autofill:active,
|
65
|
-
${name} input:-webkit-autofill:focus {
|
66
|
-
-webkit-text-fill-color: var(${cssVarList.inputValueTextColor});
|
67
|
-
box-shadow: 0 0 0 var(${cssVarList.inputHeight}) var(${cssVarList.inputBackgroundColor}) inset;
|
68
|
-
}
|
69
|
-
`;
|
70
|
-
|
71
|
-
export const resetInputFieldDefaultWidth = () => `
|
72
|
-
:host {
|
73
|
-
--vaadin-field-default-width: auto;
|
74
|
-
box-sizing: border-box;
|
75
|
-
}
|
76
|
-
`;
|
77
|
-
|
78
|
-
export const resetInputReadonlyStyle = (name) => `
|
79
|
-
${name}::part(input-field)::after {
|
80
|
-
opacity: 0;
|
81
|
-
}
|
82
|
-
`;
|
83
|
-
|
84
|
-
export const resetInputFieldInvalidBackgroundColor = (name) => `
|
85
|
-
${name}::part(input-field)::after {
|
86
|
-
background: none;
|
87
|
-
}
|
88
|
-
`;
|
89
|
-
|
90
|
-
export const resetInputOverrides = (name, cssVarList) => `
|
91
|
-
${resetInputContainer(name)}
|
92
|
-
${resetInputCursor(name)}
|
93
|
-
${resetInputPlaceholder(name)}
|
94
|
-
${resetInputField(name)}
|
95
|
-
${resetInputAutoFill(name, cssVarList)}
|
96
|
-
${resetInputFieldInvalidBackgroundColor(name)}
|
97
|
-
${resetInitialHeight(name)}
|
98
|
-
${resetInputElement(name)}
|
99
|
-
${resetInputFieldUnderlayingBorder(name)}
|
100
|
-
`;
|
101
|
-
|
102
|
-
// This function is used to support RTL correctly for input components.
|
103
|
-
// It also fixes the error message to be displayed LTR since we currently
|
104
|
-
// don't support RTL for error messages.
|
105
|
-
export const resetInputLabelPosition = (name) => `
|
106
|
-
:host ::part(error-message) {
|
107
|
-
direction: ltr;
|
108
|
-
}
|
109
|
-
:host([required]) ::part(required-indicator) {
|
110
|
-
width: 1em;
|
111
|
-
display: inline-flex;
|
112
|
-
}
|
113
|
-
:host([required]) ::part(required-indicator)::after {
|
114
|
-
position: static;
|
115
|
-
}
|
116
|
-
:host([has-label]) ::part(label) {
|
117
|
-
padding-right: 0;
|
118
|
-
padding-bottom: 0;
|
119
|
-
display: flex;
|
120
|
-
width: 100%;
|
121
|
-
}
|
122
|
-
${name} [slot="label"] {
|
123
|
-
max-width: calc(100% - 1em);
|
124
|
-
overflow: hidden;
|
125
|
-
text-overflow: ellipsis;
|
126
|
-
padding-bottom: 0.5em;
|
127
|
-
}
|
128
|
-
`;
|
129
|
-
|
130
|
-
export const inputFloatingLabelStyle = () => {
|
131
|
-
return `
|
132
|
-
:host([label-type="floating"]) {
|
133
|
-
position: relative;
|
134
|
-
}
|
135
|
-
:host([label-type="floating"][has-label]) [slot="label"] {
|
136
|
-
padding: 0;
|
137
|
-
}
|
138
|
-
:host([label-type="floating"][has-label]) > ::part(label) {
|
139
|
-
z-index: 1;
|
140
|
-
padding: 0;
|
141
|
-
width: auto;
|
142
|
-
}
|
143
|
-
`;
|
144
|
-
};
|
@@ -1,68 +0,0 @@
|
|
1
|
-
export const kebabCase = (str) =>
|
2
|
-
str
|
3
|
-
.replace(/([a-z])([A-Z])/g, '$1-$2')
|
4
|
-
.replace(/[\s_.]+/g, '-')
|
5
|
-
.toLowerCase();
|
6
|
-
|
7
|
-
export const kebabCaseJoin = (...args) => kebabCase(args.filter((arg) => !!arg).join('-'));
|
8
|
-
|
9
|
-
export const upperFirst = (str) => str.charAt(0).toUpperCase() + str.slice(1);
|
10
|
-
|
11
|
-
export const camelCaseJoin = (...args) =>
|
12
|
-
args
|
13
|
-
.filter(Boolean)
|
14
|
-
.map((arg, index) => (index === 0 ? arg : upperFirst(arg)))
|
15
|
-
.join('');
|
16
|
-
|
17
|
-
export const compose =
|
18
|
-
(...fns) =>
|
19
|
-
(val) =>
|
20
|
-
fns.reduceRight((res, fn) => fn(res), val);
|
21
|
-
|
22
|
-
export const isFunction = (maybeFunc) => typeof maybeFunc === 'function';
|
23
|
-
|
24
|
-
export const isUrl = (maybeUrl) => {
|
25
|
-
try {
|
26
|
-
// eslint-disable-next-line no-new
|
27
|
-
new URL(maybeUrl);
|
28
|
-
|
29
|
-
return true;
|
30
|
-
} catch (e) {
|
31
|
-
return false;
|
32
|
-
}
|
33
|
-
};
|
34
|
-
|
35
|
-
/**
|
36
|
-
* Compares two arrays unorderedly.
|
37
|
-
* @param {Array} arr1 - The first array to compare.
|
38
|
-
* @param {Array} arr2 - The second array to compare.
|
39
|
-
* @returns {boolean} - Returns true if the arrays are equal unorderedly, false otherwise.
|
40
|
-
*/
|
41
|
-
export const compareArraysUnordered = (arr1, arr2) => {
|
42
|
-
if (!Array.isArray(arr1) || !Array.isArray(arr2)) {
|
43
|
-
return false;
|
44
|
-
}
|
45
|
-
|
46
|
-
if (arr1.length !== arr2.length) {
|
47
|
-
return false;
|
48
|
-
}
|
49
|
-
|
50
|
-
const sortedArr1 = arr1.slice().sort();
|
51
|
-
const sortedArr2 = arr2.slice().sort();
|
52
|
-
|
53
|
-
for (let i = 0; i < sortedArr1.length; i++) {
|
54
|
-
if (sortedArr1[i] !== sortedArr2[i]) {
|
55
|
-
return false;
|
56
|
-
}
|
57
|
-
}
|
58
|
-
|
59
|
-
return true;
|
60
|
-
};
|
61
|
-
|
62
|
-
export const toTitle = (str) =>
|
63
|
-
str
|
64
|
-
.replace(/([A-Z])/g, ' $1')
|
65
|
-
.trim()
|
66
|
-
.split(' ')
|
67
|
-
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
68
|
-
.join(' ');
|
@@ -1,54 +0,0 @@
|
|
1
|
-
import { test, expect } from '@playwright/test';
|
2
|
-
import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
|
3
|
-
|
4
|
-
const img =
|
5
|
-
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzmudcbKkbOue75DaM9HDDrt0W39SJLBH-3HPK3s-K1w&s';
|
6
|
-
|
7
|
-
const componentAttributes = {
|
8
|
-
size: ['xs', 'sm', 'md', 'lg'],
|
9
|
-
editable: ['true', 'false'],
|
10
|
-
img: [img],
|
11
|
-
};
|
12
|
-
|
13
|
-
const presets = {
|
14
|
-
'direction rtl': {
|
15
|
-
direction: 'rtl',
|
16
|
-
editable: 'true',
|
17
|
-
},
|
18
|
-
'no image': {
|
19
|
-
img: '',
|
20
|
-
'display-name': 'John Doe',
|
21
|
-
},
|
22
|
-
'no image and name': {
|
23
|
-
img: '',
|
24
|
-
'display-name': '',
|
25
|
-
},
|
26
|
-
};
|
27
|
-
|
28
|
-
const storyName = 'descope-avatar';
|
29
|
-
const componentName = 'descope-avatar';
|
30
|
-
|
31
|
-
test.describe('theme', () => {
|
32
|
-
loopConfig(componentAttributes, (attr, value) => {
|
33
|
-
test.describe(`${attr}: ${value}`, () => {
|
34
|
-
test.beforeEach(async ({ page }) => {
|
35
|
-
await page.goto(getStoryUrl(storyName, { text: 'Text 123', [attr]: value }), { waitUntil: 'load' });
|
36
|
-
});
|
37
|
-
test('style', async ({ page }) => {
|
38
|
-
const componentParent = page.locator(componentName);
|
39
|
-
|
40
|
-
expect(await componentParent.screenshot()).toMatchSnapshot();
|
41
|
-
});
|
42
|
-
});
|
43
|
-
});
|
44
|
-
|
45
|
-
loopPresets(presets, (preset, name) => {
|
46
|
-
test(name, async ({ page }) => {
|
47
|
-
await page.goto(getStoryUrl(storyName, preset));
|
48
|
-
await page.waitForSelector(componentName);
|
49
|
-
const component = page.locator(componentName);
|
50
|
-
expect(
|
51
|
-
await component.screenshot({ animations: 'disabled', timeout: 3000, caret: 'hide' })
|
52
|
-
).toMatchSnapshot();
|
53
|
-
});
|
54
|
-
});});
|
@@ -1,34 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"name": "descope-avatar",
|
3
|
-
"version": "0.0.1",
|
4
|
-
"exports": {
|
5
|
-
".": {
|
6
|
-
"import": "./src/component/index.js"
|
7
|
-
},
|
8
|
-
"./theme": {
|
9
|
-
"import": "./src/theme.js"
|
10
|
-
},
|
11
|
-
"./class": {
|
12
|
-
"import": "./src/component/AvatarClass.js"
|
13
|
-
}
|
14
|
-
},
|
15
|
-
"scripts": {
|
16
|
-
"test": "echo 'No tests defined' && exit 0",
|
17
|
-
"test:e2e": "echo 'No e2e tests defined' && exit 0"
|
18
|
-
},
|
19
|
-
"devDependencies": {
|
20
|
-
"e2e-utils": "workspace:*",
|
21
|
-
"@playwright/test": "1.38.1"
|
22
|
-
},
|
23
|
-
"dependencies": {
|
24
|
-
"common": "0.0.1",
|
25
|
-
"theme-globals": "0.0.1",
|
26
|
-
"@vaadin/avatar": "24.3.4",
|
27
|
-
"@vaadin/icon": "24.3.4",
|
28
|
-
"@vaadin/icons": "24.3.4"
|
29
|
-
},
|
30
|
-
"private": true,
|
31
|
-
"publishConfig": {
|
32
|
-
"link-workspace-packages": false
|
33
|
-
}
|
34
|
-
}
|