@alfalab/core-components-pattern-lock 4.0.3-alfasans → 4.0.4
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/components/base-pattern-lock/Component.js.map +1 -1
- package/components/base-pattern-lock/index.css +7 -7
- package/components/base-pattern-lock/index.module.css.js +1 -1
- package/components/base-pattern-lock/index.module.css.js.map +1 -1
- package/cssm/components/base-pattern-lock/Component.js.map +1 -1
- package/cssm/hooks/use-pattern-lock-cleanup.js.map +1 -1
- package/cssm/typings.d.ts +5 -5
- package/cssm/utils.d.ts +1 -1
- package/cssm/utils.js.map +1 -1
- package/desktop/desktop.css +3 -3
- package/desktop/desktop.module.css.js +1 -1
- package/desktop/desktop.module.css.js.map +1 -1
- package/esm/components/base-pattern-lock/Component.js.map +1 -1
- package/esm/components/base-pattern-lock/index.css +7 -7
- package/esm/components/base-pattern-lock/index.module.css.js +1 -1
- package/esm/components/base-pattern-lock/index.module.css.js.map +1 -1
- package/esm/desktop/desktop.css +3 -3
- package/esm/desktop/desktop.module.css.js +1 -1
- package/esm/desktop/desktop.module.css.js.map +1 -1
- package/esm/hooks/use-pattern-lock-cleanup.js.map +1 -1
- package/esm/mobile/mobile.css +2 -2
- package/esm/mobile/mobile.module.css.js +1 -1
- package/esm/mobile/mobile.module.css.js.map +1 -1
- package/esm/typings.d.ts +5 -5
- package/esm/utils.d.ts +1 -1
- package/esm/utils.js.map +1 -1
- package/hooks/use-pattern-lock-cleanup.js.map +1 -1
- package/mobile/mobile.css +2 -2
- package/mobile/mobile.module.css.js +1 -1
- package/mobile/mobile.module.css.js.map +1 -1
- package/modern/components/base-pattern-lock/Component.js.map +1 -1
- package/modern/components/base-pattern-lock/index.css +7 -7
- package/modern/components/base-pattern-lock/index.module.css.js +1 -1
- package/modern/components/base-pattern-lock/index.module.css.js.map +1 -1
- package/modern/desktop/desktop.css +3 -3
- package/modern/desktop/desktop.module.css.js +1 -1
- package/modern/desktop/desktop.module.css.js.map +1 -1
- package/modern/hooks/use-pattern-lock-cleanup.js.map +1 -1
- package/modern/mobile/mobile.css +2 -2
- package/modern/mobile/mobile.module.css.js +1 -1
- package/modern/mobile/mobile.module.css.js.map +1 -1
- package/modern/typings.d.ts +5 -5
- package/modern/utils.d.ts +1 -1
- package/modern/utils.js.map +1 -1
- package/moderncssm/components/base-pattern-lock/Component.js.map +1 -1
- package/moderncssm/hooks/use-pattern-lock-cleanup.js.map +1 -1
- package/moderncssm/typings.d.ts +5 -5
- package/moderncssm/utils.d.ts +1 -1
- package/moderncssm/utils.js.map +1 -1
- package/package.json +6 -6
- package/src/components/base-pattern-lock/index.module.css +1 -1
- package/src/desktop/desktop.module.css +1 -1
- package/src/mobile/mobile.module.css +1 -1
- package/typings.d.ts +5 -5
- package/utils.d.ts +1 -1
- package/utils.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":["forwardRef","DEFAULT_EXTRA_BOUNDS","__rest","useState","useEffect","getSizes","getTheme","OBSERVE_OPTIONS","getDefaultObserveTarget","THEME_STATE","getColorByToken","OBSERVABLE_TOKENS","__assign","React","cn","commonStyles","ReactCanvasPatternLock","ButtonMobile","getDataTestId"],"mappings":";;;;;;;;;;;;;;;;;;;IAsBa,eAAe,GAAGA,gBAAU,CAIrC,UACI,EAcC,EACD,GAAG,EAAA;;AAdC,IAAA,IAAA,EAAqB,GAAA,EAAA,CAAA,aAAA,CAAA,CAArB,aAAa,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,CACrB,CAAA,EAAA,GAAA,EAAA,CAAA,cAAmB,CAAnB,CAAA,cAAc,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,CACnB,CAAA,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA,CACT,UAAU,GAAA,EAAA,CAAA,UAAA,CACV,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAiC,EAAjC,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,GAAA,EAAA,CACjC,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAyB,CAAzB,CAAA,iBAAiB,mBAAG,KAAK,GAAA,EAAA,CACzB,CAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAA,CAAA,CAChB,EAAkC,GAAA,EAAA,CAAA,WAAA,CAAA,CAAlC,WAAW,GAAG,EAAA,KAAA,MAAA,GAAAC,2BAAoB,GAAA,EAAA,CAAA,CAClB,EAAA,CAAA,gBAAA,CAChB,KAAA,KAAK,WAAA,CACL,CAAA,EAAA,GAAA,EAAA,CAAA,MAAW,CAAX,CAAA,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,CAAA,CACX,gBAAgB,CAAhB,CAAA,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,GAAA,EAAA,CAAA,CACb,SAAS,GAAAC,YAAA,CAAA,EAAA,EAbhB,8LAcC;IAGK,IAAA,EAAA,GAAsBC,cAAQ,EAEjC,EAFI,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAErB;AAEH,IAAAC,eAAS,CAAC,YAAA;AACA,QAAA,IAAA,EAAkC,GAAAC,cAAQ,EAAE,EAA1C,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe;AAElD,QAAA,SAAS,CAAC;AACN,YAAA,KAAK,EAAEC,cAAQ,CAAC,YAAY,CAAC;AAC7B,YAAA,KAAK,EAAA,KAAA;AACL,YAAA,MAAM,EAAA,MAAA;AACT,SAAA,CAAC;KACL,EAAE,EAAE,CAAC;AAEN,IAAAF,eAAS,CAAC,YAAA;QACN,IAAI,aAAa,GAA4B,IAAI;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":["forwardRef","DEFAULT_EXTRA_BOUNDS","__rest","useState","useEffect","getSizes","getTheme","OBSERVE_OPTIONS","getDefaultObserveTarget","THEME_STATE","getColorByToken","OBSERVABLE_TOKENS","__assign","React","cn","commonStyles","ReactCanvasPatternLock","ButtonMobile","getDataTestId"],"mappings":"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"}
|
|
@@ -11,35 +11,35 @@
|
|
|
11
11
|
--pattern-lock-min-height: 272px;
|
|
12
12
|
--pattern-lock-with-forgot-btn-min-height: 336px;
|
|
13
13
|
}
|
|
14
|
-
.pattern-
|
|
14
|
+
.pattern-lock__component_i3vs9 {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: column;
|
|
17
17
|
align-items: center;
|
|
18
18
|
box-sizing: border-box;
|
|
19
19
|
min-height: var(--pattern-lock-min-height);
|
|
20
20
|
}
|
|
21
|
-
.pattern-
|
|
21
|
+
.pattern-lock__component_i3vs9 canvas {
|
|
22
22
|
display: block;
|
|
23
23
|
margin: var(--gap-0) auto;
|
|
24
24
|
}
|
|
25
|
-
.pattern-
|
|
25
|
+
.pattern-lock__component_i3vs9 .pattern-lock__canvasContainer_i3vs9 {
|
|
26
26
|
box-sizing: border-box;
|
|
27
27
|
padding: var(--gap-16) var(--gap-16);
|
|
28
28
|
min-width: var(--pattern-lock-min-width);
|
|
29
29
|
min-height: var(--pattern-lock-min-height);
|
|
30
30
|
}
|
|
31
|
-
.pattern-
|
|
31
|
+
.pattern-lock__component_i3vs9 .pattern-lock__canvasContainer_i3vs9 .pattern-lock__canvasInner_i3vs9 {
|
|
32
32
|
box-sizing: border-box;
|
|
33
33
|
padding: var(--gap-0) var(--gap-16);
|
|
34
34
|
min-width: var(--pattern-lock-min-height);
|
|
35
35
|
}
|
|
36
|
-
.pattern-
|
|
36
|
+
.pattern-lock__component_i3vs9.pattern-lock__disabled_i3vs9 {
|
|
37
37
|
pointer-events: none;
|
|
38
38
|
}
|
|
39
|
-
.pattern-
|
|
39
|
+
.pattern-lock__withForgotBtn_i3vs9 {
|
|
40
40
|
min-height: var(--pattern-lock-with-forgot-btn-min-height);
|
|
41
41
|
}
|
|
42
|
-
.pattern-
|
|
42
|
+
.pattern-lock__forgotBtn_i3vs9 {
|
|
43
43
|
display: block;
|
|
44
44
|
min-height: var(--size-xs-height);
|
|
45
45
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./index.css');
|
|
4
4
|
|
|
5
|
-
var commonStyles = {"component":"pattern-
|
|
5
|
+
var commonStyles = {"component":"pattern-lock__component_i3vs9","canvasContainer":"pattern-lock__canvasContainer_i3vs9","canvasInner":"pattern-lock__canvasInner_i3vs9","disabled":"pattern-lock__disabled_i3vs9","withForgotBtn":"pattern-lock__withForgotBtn_i3vs9","forgotBtn":"pattern-lock__forgotBtn_i3vs9"};
|
|
6
6
|
|
|
7
7
|
module.exports = commonStyles;
|
|
8
8
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.component {\n display: flex;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n min-height: var(--pattern-lock-min-height);\n\n & canvas {\n display: block;\n margin: var(--gap-0) auto;\n }\n\n & .canvasContainer {\n box-sizing: border-box;\n padding: var(--gap-16) var(--gap-16);\n min-width: var(--pattern-lock-min-width);\n min-height: var(--pattern-lock-min-height);\n\n & .canvasInner {\n box-sizing: border-box;\n padding: var(--gap-0) var(--gap-16);\n min-width: var(--pattern-lock-min-height);\n }\n }\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n.withForgotBtn {\n min-height: var(--pattern-lock-with-forgot-btn-min-height);\n}\n\n.forgotBtn {\n display: block;\n min-height: var(--size-xs-height);\n}\n"],"names":[],"mappings":";;;;AAEgB,mBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,aAAa,CAAC,iCAAiC,CAAC,UAAU,CAAC,8BAA8B,CAAC,eAAe,CAAC,mCAAmC,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":["forwardRef","DEFAULT_EXTRA_BOUNDS","__rest","useState","useEffect","getSizes","getTheme","OBSERVE_OPTIONS","getDefaultObserveTarget","THEME_STATE","getColorByToken","OBSERVABLE_TOKENS","__assign","React","cn","commonStyles","ReactCanvasPatternLock","ButtonMobile","getDataTestId"],"mappings":";;;;;;;;;;;;;;;;;;;;IAsBa,eAAe,GAAGA,gBAAU,CAIrC,UACI,EAcC,EACD,GAAG,EAAA;;AAdC,IAAA,IAAA,EAAqB,GAAA,EAAA,CAAA,aAAA,CAAA,CAArB,aAAa,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,CACrB,CAAA,EAAA,GAAA,EAAA,CAAA,cAAmB,CAAnB,CAAA,cAAc,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,CACnB,CAAA,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA,CACT,UAAU,GAAA,EAAA,CAAA,UAAA,CACV,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAiC,EAAjC,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,GAAA,EAAA,CACjC,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAyB,CAAzB,CAAA,iBAAiB,mBAAG,KAAK,GAAA,EAAA,CACzB,CAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAA,CAAA,CAChB,EAAkC,GAAA,EAAA,CAAA,WAAA,CAAA,CAAlC,WAAW,GAAG,EAAA,KAAA,MAAA,GAAAC,2BAAoB,GAAA,EAAA,CAAA,CAClB,EAAA,CAAA,gBAAA,CAChB,KAAA,KAAK,WAAA,CACL,CAAA,EAAA,GAAA,EAAA,CAAA,MAAW,CAAX,CAAA,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,CAAA,CACX,gBAAgB,CAAhB,CAAA,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,GAAA,EAAA,CAAA,CACb,SAAS,GAAAC,YAAA,CAAA,EAAA,EAbhB,8LAcC;IAGK,IAAA,EAAA,GAAsBC,cAAQ,EAEjC,EAFI,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAErB;AAEH,IAAAC,eAAS,CAAC,YAAA;AACA,QAAA,IAAA,EAAkC,GAAAC,cAAQ,EAAE,EAA1C,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe;AAElD,QAAA,SAAS,CAAC;AACN,YAAA,KAAK,EAAEC,cAAQ,CAAC,YAAY,CAAC;AAC7B,YAAA,KAAK,EAAA,KAAA;AACL,YAAA,MAAM,EAAA,MAAA;AACT,SAAA,CAAC;KACL,EAAE,EAAE,CAAC;AAEN,IAAAF,eAAS,CAAC,YAAA;QACN,IAAI,aAAa,GAA4B,IAAI;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":["forwardRef","DEFAULT_EXTRA_BOUNDS","__rest","useState","useEffect","getSizes","getTheme","OBSERVE_OPTIONS","getDefaultObserveTarget","THEME_STATE","getColorByToken","OBSERVABLE_TOKENS","__assign","React","cn","commonStyles","ReactCanvasPatternLock","ButtonMobile","getDataTestId"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":["useMemo"],"mappings":";;;;;;AAIO,IAAM,qBAAqB,GAAG,UACjC,cAAmE,EAAA;IAEnE,IAAM,KAAK,GAAGA,aAAO,CAAC,YAAA;
|
|
1
|
+
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":["useMemo"],"mappings":";;;;;;AAIO,IAAM,qBAAqB,GAAG,UACjC,cAAmE,EAAA;IAEnE,IAAM,KAAK,GAAGA,aAAO,CAAC,YAAA;AAClB,QAAA,IAAI,cAAc,CAAC,OAAO,EAAE;AACxB,YAAA,cAAc,CAAC,OAAO,CAAC,eAAe,EAAE;;AAEhD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,OAAO;AACH,QAAA,KAAK,EAAA,KAAA;KACR;AACL;;;;"}
|
package/cssm/typings.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent } from 'react';
|
|
2
2
|
import { type ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
|
|
3
|
-
|
|
3
|
+
type ConditionalProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Показать кнопку "забыли код"
|
|
6
6
|
* @default "Забыли код?"
|
|
@@ -20,7 +20,7 @@ declare type ConditionalProps = {
|
|
|
20
20
|
onForgotBtnClick?: never;
|
|
21
21
|
forgotCodeBtnText?: never;
|
|
22
22
|
};
|
|
23
|
-
export
|
|
23
|
+
export type CommonPatternLockProps = {
|
|
24
24
|
/**
|
|
25
25
|
* Дополнительный класс
|
|
26
26
|
*/
|
|
@@ -53,7 +53,7 @@ export declare type CommonPatternLockProps = {
|
|
|
53
53
|
*/
|
|
54
54
|
disabled?: boolean;
|
|
55
55
|
} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
|
|
56
|
-
export
|
|
56
|
+
export type PrivatePatternLockProps = {
|
|
57
57
|
/**
|
|
58
58
|
* Включает ховер-эффект
|
|
59
59
|
*/
|
|
@@ -65,7 +65,7 @@ export declare type PrivatePatternLockProps = {
|
|
|
65
65
|
[key: string]: string;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
|
-
export
|
|
68
|
+
export type PatternLockProps = CommonPatternLockProps & {
|
|
69
69
|
/**
|
|
70
70
|
* Контрольная точка, с нее начинается desktop версия
|
|
71
71
|
* @default 1024
|
|
@@ -81,7 +81,7 @@ export declare type PatternLockProps = CommonPatternLockProps & {
|
|
|
81
81
|
*/
|
|
82
82
|
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
83
83
|
};
|
|
84
|
-
export
|
|
84
|
+
export type ObservableTokens = {
|
|
85
85
|
ACCENT_INITIAL: string;
|
|
86
86
|
ACCENT_SUCCESS: string;
|
|
87
87
|
ACCENT_FAILURE: string;
|
package/cssm/utils.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock
|
|
|
2
2
|
export declare function getDefaultObserveTarget(): HTMLHeadElement;
|
|
3
3
|
export declare function getColorByToken(token: string): string;
|
|
4
4
|
export declare const getSizes: () => {
|
|
5
|
-
elementSizes: ThemeParams[
|
|
5
|
+
elementSizes: ThemeParams["dimens"];
|
|
6
6
|
width: number;
|
|
7
7
|
height: number;
|
|
8
8
|
};
|
package/cssm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":["OBSERVABLE_TOKENS","THEME_STATE","__assign","getDataTestId"],"mappings":";;;;;;;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEO,IAAM,QAAQ,GAAG,CAAC,YAAA;AACrB,IAAA,IAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;IAEtF,OAAO,YAAA;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":["OBSERVABLE_TOKENS","THEME_STATE","__assign","getDataTestId"],"mappings":";;;;;;;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEO,IAAM,QAAQ,GAAG,CAAC,YAAA;AACrB,IAAA,IAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;IAEtF,OAAO,YAAA;QACH,IAAI,UAAU,EAAE;AACZ,YAAA,OAAO,UAAU;;AAGrB,QAAA,UAAU,GAAG;AACT,YAAA,YAAY,oCAAO,YAAY,CAAA,EAAA,EAAE,UAAU,EAAE,EAAE,EAAE,CAAA;AACjD,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,MAAM,EAAE,GAAG;SACd;AAED,QAAA,OAAO,UAAU;AACrB,KAAC;AACL,CAAC;AAEK,SAAU,QAAQ,CAAC,MAA6B,EAAA;;AAClD,IAAA,IAAM,UAAU,GAAG;AACf,QAAA,OAAO,EAAE,eAAe,CAACA,wBAAiB,CAAC,OAAO,CAAC;AACnD,QAAA,EAAE,EAAE,aAAa;AACjB,QAAA,MAAM,EAAE,eAAe,CAACA,wBAAiB,CAAC,eAAe,CAAC;AAC1D,QAAA,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,eAAe,CAACA,wBAAiB,CAAC,WAAW,CAAC;AACrD,YAAA,KAAK,EAAE,eAAe,CAACA,wBAAiB,CAAC,WAAW,CAAC;AACxD,SAAA;KACJ;AAED,IAAA,OAAA,EAAA,GAAA,EAAA;QACI,EAAC,CAAAC,kBAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAACF,wBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAACA,wBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;QACD,EAAC,CAAAC,kBAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAACF,wBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAACA,wBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;QACD,EAAC,CAAAC,kBAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAACF,wBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAACA,wBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;AACH,QAAA,EAAA;AACN;AAEM,SAAU,qBAAqB,CAAC,UAAkB,EAAA;IACpD,OAAO;AACH,QAAA,WAAW,EAAE,UAAU;AACvB,QAAA,aAAa,EAAEG,kBAAa,CAAC,UAAU,EAAE,iBAAiB,CAAC;KAC9D;AACL;;;;;;;;"}
|
package/desktop/desktop.css
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
:root {
|
|
7
7
|
--pattern-lock-min-width: 304px;
|
|
8
8
|
}
|
|
9
|
-
.pattern-
|
|
9
|
+
.pattern-lock__component_17my4 {
|
|
10
10
|
margin: var(--gap-0) auto;
|
|
11
11
|
min-width: var(--pattern-lock-min-width);
|
|
12
12
|
}
|
|
13
|
-
.pattern-
|
|
13
|
+
.pattern-lock__forgotBtn_17my4 {
|
|
14
14
|
margin: var(--gap-8) auto var(--gap-0);
|
|
15
15
|
}
|
|
16
|
-
.pattern-
|
|
16
|
+
.pattern-lock__hiddenBtn_17my4 {
|
|
17
17
|
display: none;
|
|
18
18
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./desktop.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"pattern-
|
|
5
|
+
var styles = {"component":"pattern-lock__component_17my4","forgotBtn":"pattern-lock__forgotBtn_17my4","hiddenBtn":"pattern-lock__hiddenBtn_17my4"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n margin: var(--gap-0) auto;\n min-width: var(--pattern-lock-min-width);\n}\n\n.forgotBtn {\n margin: var(--gap-8) auto var(--gap-0);\n}\n\n.hiddenBtn {\n display: none;\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":[],"mappings":";;;;;;;;;;IAsBa,eAAe,GAAG,UAAU,CAIrC,UACI,EAcC,EACD,GAAG,EAAA;;AAdC,IAAA,IAAA,EAAqB,GAAA,EAAA,CAAA,aAAA,CAAA,CAArB,aAAa,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,CACrB,CAAA,EAAA,GAAA,EAAA,CAAA,cAAmB,CAAnB,CAAA,cAAc,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,CACnB,CAAA,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA,CACT,UAAU,GAAA,EAAA,CAAA,UAAA,CACV,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAiC,EAAjC,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,GAAA,EAAA,CACjC,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAyB,CAAzB,CAAA,iBAAiB,mBAAG,KAAK,GAAA,EAAA,CACzB,CAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAA,CAAA,CAChB,EAAkC,GAAA,EAAA,CAAA,WAAA,CAAA,CAAlC,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,oBAAoB,GAAA,EAAA,CAAA,CAClB,EAAA,CAAA,gBAAA,CAChB,KAAA,KAAK,WAAA,CACL,CAAA,EAAA,GAAA,EAAA,CAAA,MAAW,CAAX,CAAA,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,CAAA,CACX,gBAAgB,CAAhB,CAAA,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,GAAA,EAAA,CAAA,CACb,SAAS,GAAA,MAAA,CAAA,EAAA,EAbhB,8LAcC;IAGK,IAAA,EAAA,GAAsB,QAAQ,EAEjC,EAFI,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAErB;AAEH,IAAA,SAAS,CAAC,YAAA;AACA,QAAA,IAAA,EAAkC,GAAA,QAAQ,EAAE,EAA1C,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe;AAElD,QAAA,SAAS,CAAC;AACN,YAAA,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC;AAC7B,YAAA,KAAK,EAAA,KAAA;AACL,YAAA,MAAM,EAAA,MAAA;AACT,SAAA,CAAC;KACL,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CAAC,YAAA;QACN,IAAI,aAAa,GAA4B,IAAI;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":[],"mappings":";;;;;;;;;;IAsBa,eAAe,GAAG,UAAU,CAIrC,UACI,EAcC,EACD,GAAG,EAAA;;AAdC,IAAA,IAAA,EAAqB,GAAA,EAAA,CAAA,aAAA,CAAA,CAArB,aAAa,GAAA,EAAA,KAAA,MAAA,GAAG,KAAK,GAAA,EAAA,CACrB,CAAA,EAAA,GAAA,EAAA,CAAA,cAAmB,CAAnB,CAAA,cAAc,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,KAAA,CACnB,CAAA,SAAS,GAAA,EAAA,CAAA,SAAA,CAAA,CACT,UAAU,GAAA,EAAA,CAAA,UAAA,CACV,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAiC,EAAjC,iBAAiB,GAAA,EAAA,KAAA,MAAA,GAAG,aAAa,GAAA,EAAA,CACjC,CAAA,EAAA,GAAA,EAAA,CAAA,iBAAyB,CAAzB,CAAA,iBAAiB,mBAAG,KAAK,GAAA,EAAA,CACzB,CAAA,gBAAgB,GAAA,EAAA,CAAA,gBAAA,CAAA,CAChB,EAAkC,GAAA,EAAA,CAAA,WAAA,CAAA,CAAlC,WAAW,GAAG,EAAA,KAAA,MAAA,GAAA,oBAAoB,GAAA,EAAA,CAAA,CAClB,EAAA,CAAA,gBAAA,CAChB,KAAA,KAAK,WAAA,CACL,CAAA,EAAA,GAAA,EAAA,CAAA,MAAW,CAAX,CAAA,MAAM,GAAG,EAAA,KAAA,MAAA,GAAA,EAAE,GAAA,EAAA,CAAA,CACX,gBAAgB,CAAhB,CAAA,QAAQ,GAAG,EAAA,KAAA,MAAA,GAAA,KAAK,GAAA,EAAA,CAAA,CACb,SAAS,GAAA,MAAA,CAAA,EAAA,EAbhB,8LAcC;IAGK,IAAA,EAAA,GAAsB,QAAQ,EAEjC,EAFI,MAAM,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,SAAS,GAAA,EAAA,CAAA,CAAA,CAErB;AAEH,IAAA,SAAS,CAAC,YAAA;AACA,QAAA,IAAA,EAAkC,GAAA,QAAQ,EAAE,EAA1C,YAAY,GAAA,EAAA,CAAA,YAAA,EAAE,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAe;AAElD,QAAA,SAAS,CAAC;AACN,YAAA,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC;AAC7B,YAAA,KAAK,EAAA,KAAA;AACL,YAAA,MAAM,EAAA,MAAA;AACT,SAAA,CAAC;KACL,EAAE,EAAE,CAAC;AAEN,IAAA,SAAS,CAAC,YAAA;QACN,IAAI,aAAa,GAA4B,IAAI;QAEjD,IAAI,aAAa,EAAE;AACP,YAAA,IAAA,KACJ,cAAc,CAAA,OADe,EAAzB,OAAO,mBAAG,eAAe,GAAA,EAAA,EAAE,EAAA,GAC/B,cAAc,CADoD,SAAA,EAAnC,SAAS,GAAG,EAAA,KAAA,MAAA,GAAA,uBAAuB,KAAA;YAGtE,aAAa,GAAG,IAAI,gBAAgB,CAAC,YAAA;gBACjC,OAAA,SAAS,CAAC,UAAC,SAAS,EAAA;AACV,oBAAA,IAAA,EAAkC,GAAA,QAAQ,EAAE,EAA1C,KAAK,GAAA,EAAA,CAAA,KAAA,EAAE,MAAM,GAAA,EAAA,CAAA,MAAA,EAAE,YAAY,GAAA,EAAA,CAAA,YAAe;oBAElD,IAAI,CAAC,SAAS,EAAE;AACZ,wBAAA,OAAO,EAAE,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,EAAA,KAAA,EAAE,MAAM,EAAA,MAAA,EAAE;;AAG3D,oBAAA,IAAM,WAAW,GAAG,SAAS,CAAC,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,OAAO;oBACvE,IAAM,YAAY,GACd,WAAW,KAAK,eAAe,CAAC,iBAAiB,CAAC,OAAO,CAAC;AAE9D,oBAAA,IAAI,YAAY;wBAAE,OAAY,QAAA,CAAA,QAAA,CAAA,EAAA,EAAA,SAAS,KAAE,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC,EAAG,CAAA;AAEzE,oBAAA,OAAO,SAAS;AACpB,iBAAC,CAAC;AAdF,aAcE,CACL;YAED,aAAa,CAAC,OAAO,CAAC,SAAS,EAAE,EAAE,OAAO,CAAC;;AAG/C,QAAA,OAAO,YAAM,EAAA,OAAA,aAAa,KAAA,IAAA,IAAb,aAAa,KAAA,MAAA,GAAA,MAAA,GAAb,aAAa,CAAE,UAAU,EAAE,CAA3B,EAA2B;;AAE5C,KAAC,EAAE,CAAC,aAAa,CAAC,CAAC;AAEnB,IAAA,QACI,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,SAAS,GAAA,EAAA,GAAA,EAAA;AAC7D,YAAA,EAAA,CAAC,YAAY,CAAC,MAAM,CAAA,GAAG,CAAC,MAAM;AAC9B,YAAA,EAAA,CAAC,YAAY,CAAC,aAAa,CAAA,GAAG,iBAAiB;AAC/C,YAAA,EAAA,CAAC,YAAY,CAAC,QAAQ,CAAA,GAAG,QAAQ;AACnC,YAAA,EAAA,EAAA,EAAA,cAAA,EACY,UAAU,EAAA;AAExB,QAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,eAAe,EAAA;AACxC,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,YAAY,CAAC,WAAW,EAAA;AACpC,gBAAA,KAAA,CAAA,aAAA,CAAC,sBAAsB,EAAA,QAAA,CAAA,EAAA,EACf,SAAS,EACT,MAAM,EAAA,EACV,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,CAAC,EACP,YAAY,EAAC,eAAe,EAC5B,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EAAA,CAAA,CACd,CACA,CACJ;AACL,QAAA,iBAAiB,KACd,KAAA,CAAA,aAAA,CAAC,YAAY,EACT,EAAA,IAAI,EAAC,aAAa,EAClB,SAAS,EAAE,EAAE,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EACvD,OAAO,EAAE,gBAAgB,EACzB,UAAU,EAAE,aAAa,CAAC,UAAU,EAAE,iBAAiB,CAAC,EAEvD,EAAA,iBAAiB,CACP,CAClB,CACC;AAEd,CAAC;AAGL,eAAe,CAAC,WAAW,GAAG,iBAAiB;AAC/C,sBAAsB,CAAC,WAAW,GAAG,wBAAwB;;;;"}
|
|
@@ -11,35 +11,35 @@
|
|
|
11
11
|
--pattern-lock-min-height: 272px;
|
|
12
12
|
--pattern-lock-with-forgot-btn-min-height: 336px;
|
|
13
13
|
}
|
|
14
|
-
.pattern-
|
|
14
|
+
.pattern-lock__component_i3vs9 {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: column;
|
|
17
17
|
align-items: center;
|
|
18
18
|
box-sizing: border-box;
|
|
19
19
|
min-height: var(--pattern-lock-min-height);
|
|
20
20
|
}
|
|
21
|
-
.pattern-
|
|
21
|
+
.pattern-lock__component_i3vs9 canvas {
|
|
22
22
|
display: block;
|
|
23
23
|
margin: var(--gap-0) auto;
|
|
24
24
|
}
|
|
25
|
-
.pattern-
|
|
25
|
+
.pattern-lock__component_i3vs9 .pattern-lock__canvasContainer_i3vs9 {
|
|
26
26
|
box-sizing: border-box;
|
|
27
27
|
padding: var(--gap-16) var(--gap-16);
|
|
28
28
|
min-width: var(--pattern-lock-min-width);
|
|
29
29
|
min-height: var(--pattern-lock-min-height);
|
|
30
30
|
}
|
|
31
|
-
.pattern-
|
|
31
|
+
.pattern-lock__component_i3vs9 .pattern-lock__canvasContainer_i3vs9 .pattern-lock__canvasInner_i3vs9 {
|
|
32
32
|
box-sizing: border-box;
|
|
33
33
|
padding: var(--gap-0) var(--gap-16);
|
|
34
34
|
min-width: var(--pattern-lock-min-height);
|
|
35
35
|
}
|
|
36
|
-
.pattern-
|
|
36
|
+
.pattern-lock__component_i3vs9.pattern-lock__disabled_i3vs9 {
|
|
37
37
|
pointer-events: none;
|
|
38
38
|
}
|
|
39
|
-
.pattern-
|
|
39
|
+
.pattern-lock__withForgotBtn_i3vs9 {
|
|
40
40
|
min-height: var(--pattern-lock-with-forgot-btn-min-height);
|
|
41
41
|
}
|
|
42
|
-
.pattern-
|
|
42
|
+
.pattern-lock__forgotBtn_i3vs9 {
|
|
43
43
|
display: block;
|
|
44
44
|
min-height: var(--size-xs-height);
|
|
45
45
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
var commonStyles = {"component":"pattern-
|
|
3
|
+
var commonStyles = {"component":"pattern-lock__component_i3vs9","canvasContainer":"pattern-lock__canvasContainer_i3vs9","canvasInner":"pattern-lock__canvasInner_i3vs9","disabled":"pattern-lock__disabled_i3vs9","withForgotBtn":"pattern-lock__withForgotBtn_i3vs9","forgotBtn":"pattern-lock__forgotBtn_i3vs9"};
|
|
4
4
|
|
|
5
5
|
export { commonStyles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.component {\n display: flex;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n min-height: var(--pattern-lock-min-height);\n\n & canvas {\n display: block;\n margin: var(--gap-0) auto;\n }\n\n & .canvasContainer {\n box-sizing: border-box;\n padding: var(--gap-16) var(--gap-16);\n min-width: var(--pattern-lock-min-width);\n min-height: var(--pattern-lock-min-height);\n\n & .canvasInner {\n box-sizing: border-box;\n padding: var(--gap-0) var(--gap-16);\n min-width: var(--pattern-lock-min-height);\n }\n }\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n.withForgotBtn {\n min-height: var(--pattern-lock-with-forgot-btn-min-height);\n}\n\n.forgotBtn {\n display: block;\n min-height: var(--size-xs-height);\n}\n"],"names":[],"mappings":";;AAEgB,mBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,aAAa,CAAC,iCAAiC,CAAC,UAAU,CAAC,8BAA8B,CAAC,eAAe,CAAC,mCAAmC,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
package/esm/desktop/desktop.css
CHANGED
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
:root {
|
|
7
7
|
--pattern-lock-min-width: 304px;
|
|
8
8
|
}
|
|
9
|
-
.pattern-
|
|
9
|
+
.pattern-lock__component_17my4 {
|
|
10
10
|
margin: var(--gap-0) auto;
|
|
11
11
|
min-width: var(--pattern-lock-min-width);
|
|
12
12
|
}
|
|
13
|
-
.pattern-
|
|
13
|
+
.pattern-lock__forgotBtn_17my4 {
|
|
14
14
|
margin: var(--gap-8) auto var(--gap-0);
|
|
15
15
|
}
|
|
16
|
-
.pattern-
|
|
16
|
+
.pattern-lock__hiddenBtn_17my4 {
|
|
17
17
|
display: none;
|
|
18
18
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './desktop.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"pattern-
|
|
3
|
+
var styles = {"component":"pattern-lock__component_17my4","forgotBtn":"pattern-lock__forgotBtn_17my4","hiddenBtn":"pattern-lock__hiddenBtn_17my4"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n margin: var(--gap-0) auto;\n min-width: var(--pattern-lock-min-width);\n}\n\n.forgotBtn {\n margin: var(--gap-8) auto var(--gap-0);\n}\n\n.hiddenBtn {\n display: none;\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":[],"mappings":";;AAIO,IAAM,qBAAqB,GAAG,UACjC,cAAmE,EAAA;IAEnE,IAAM,KAAK,GAAG,OAAO,CAAC,YAAA;
|
|
1
|
+
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":[],"mappings":";;AAIO,IAAM,qBAAqB,GAAG,UACjC,cAAmE,EAAA;IAEnE,IAAM,KAAK,GAAG,OAAO,CAAC,YAAA;AAClB,QAAA,IAAI,cAAc,CAAC,OAAO,EAAE;AACxB,YAAA,cAAc,CAAC,OAAO,CAAC,eAAe,EAAE;;AAEhD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,OAAO;AACH,QAAA,KAAK,EAAA,KAAA;KACR;AACL;;;;"}
|
package/esm/mobile/mobile.css
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
:root {
|
|
7
7
|
--pattern-lock-min-width: 304px;
|
|
8
8
|
}
|
|
9
|
-
.pattern-
|
|
9
|
+
.pattern-lock__component_149qo {
|
|
10
10
|
margin: var(--gap-0) auto;
|
|
11
11
|
min-width: var(--pattern-lock-min-width);
|
|
12
12
|
}
|
|
13
|
-
.pattern-
|
|
13
|
+
.pattern-lock__forgotBtn_149qo {
|
|
14
14
|
margin: var(--gap-8) auto var(--gap-0);
|
|
15
15
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './mobile.css';
|
|
2
2
|
|
|
3
|
-
var styles = {"component":"pattern-
|
|
3
|
+
var styles = {"component":"pattern-lock__component_149qo","forgotBtn":"pattern-lock__forgotBtn_149qo"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=mobile.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n margin: var(--gap-0) auto;\n min-width: var(--pattern-lock-min-width);\n}\n\n.forgotBtn {\n margin: var(--gap-8) auto var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
package/esm/typings.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent } from 'react';
|
|
2
2
|
import { type ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
|
|
3
|
-
|
|
3
|
+
type ConditionalProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Показать кнопку "забыли код"
|
|
6
6
|
* @default "Забыли код?"
|
|
@@ -20,7 +20,7 @@ declare type ConditionalProps = {
|
|
|
20
20
|
onForgotBtnClick?: never;
|
|
21
21
|
forgotCodeBtnText?: never;
|
|
22
22
|
};
|
|
23
|
-
export
|
|
23
|
+
export type CommonPatternLockProps = {
|
|
24
24
|
/**
|
|
25
25
|
* Дополнительный класс
|
|
26
26
|
*/
|
|
@@ -53,7 +53,7 @@ export declare type CommonPatternLockProps = {
|
|
|
53
53
|
*/
|
|
54
54
|
disabled?: boolean;
|
|
55
55
|
} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
|
|
56
|
-
export
|
|
56
|
+
export type PrivatePatternLockProps = {
|
|
57
57
|
/**
|
|
58
58
|
* Включает ховер-эффект
|
|
59
59
|
*/
|
|
@@ -65,7 +65,7 @@ export declare type PrivatePatternLockProps = {
|
|
|
65
65
|
[key: string]: string;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
|
-
export
|
|
68
|
+
export type PatternLockProps = CommonPatternLockProps & {
|
|
69
69
|
/**
|
|
70
70
|
* Контрольная точка, с нее начинается desktop версия
|
|
71
71
|
* @default 1024
|
|
@@ -81,7 +81,7 @@ export declare type PatternLockProps = CommonPatternLockProps & {
|
|
|
81
81
|
*/
|
|
82
82
|
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
83
83
|
};
|
|
84
|
-
export
|
|
84
|
+
export type ObservableTokens = {
|
|
85
85
|
ACCENT_INITIAL: string;
|
|
86
86
|
ACCENT_SUCCESS: string;
|
|
87
87
|
ACCENT_FAILURE: string;
|
package/esm/utils.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock
|
|
|
2
2
|
export declare function getDefaultObserveTarget(): HTMLHeadElement;
|
|
3
3
|
export declare function getColorByToken(token: string): string;
|
|
4
4
|
export declare const getSizes: () => {
|
|
5
|
-
elementSizes: ThemeParams[
|
|
5
|
+
elementSizes: ThemeParams["dimens"];
|
|
6
6
|
width: number;
|
|
7
7
|
height: number;
|
|
8
8
|
};
|
package/esm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":[],"mappings":";;;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEO,IAAM,QAAQ,GAAG,CAAC,YAAA;AACrB,IAAA,IAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;IAEtF,OAAO,YAAA;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":[],"mappings":";;;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEO,IAAM,QAAQ,GAAG,CAAC,YAAA;AACrB,IAAA,IAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;IAEtF,OAAO,YAAA;QACH,IAAI,UAAU,EAAE;AACZ,YAAA,OAAO,UAAU;;AAGrB,QAAA,UAAU,GAAG;AACT,YAAA,YAAY,wBAAO,YAAY,CAAA,EAAA,EAAE,UAAU,EAAE,EAAE,EAAE,CAAA;AACjD,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,MAAM,EAAE,GAAG;SACd;AAED,QAAA,OAAO,UAAU;AACrB,KAAC;AACL,CAAC;AAEK,SAAU,QAAQ,CAAC,MAA6B,EAAA;;AAClD,IAAA,IAAM,UAAU,GAAG;AACf,QAAA,OAAO,EAAE,eAAe,CAAC,iBAAiB,CAAC,OAAO,CAAC;AACnD,QAAA,EAAE,EAAE,aAAa;AACjB,QAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,eAAe,CAAC;AAC1D,QAAA,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,eAAe,CAAC,iBAAiB,CAAC,WAAW,CAAC;AACrD,YAAA,KAAK,EAAE,eAAe,CAAC,iBAAiB,CAAC,WAAW,CAAC;AACxD,SAAA;KACJ;AAED,IAAA,OAAA,EAAA,GAAA,EAAA;QACI,EAAC,CAAA,WAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;QACD,EAAC,CAAA,WAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;QACD,EAAC,CAAA,WAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;AACH,QAAA,EAAA;AACN;AAEM,SAAU,qBAAqB,CAAC,UAAkB,EAAA;IACpD,OAAO;AACH,QAAA,WAAW,EAAE,UAAU;AACvB,QAAA,aAAa,EAAE,aAAa,CAAC,UAAU,EAAE,iBAAiB,CAAC;KAC9D;AACL;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":["useMemo"],"mappings":";;;;;;AAIO,IAAM,qBAAqB,GAAG,UACjC,cAAmE,EAAA;IAEnE,IAAM,KAAK,GAAGA,aAAO,CAAC,YAAA;
|
|
1
|
+
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":["useMemo"],"mappings":";;;;;;AAIO,IAAM,qBAAqB,GAAG,UACjC,cAAmE,EAAA;IAEnE,IAAM,KAAK,GAAGA,aAAO,CAAC,YAAA;AAClB,QAAA,IAAI,cAAc,CAAC,OAAO,EAAE;AACxB,YAAA,cAAc,CAAC,OAAO,CAAC,eAAe,EAAE;;AAEhD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,OAAO;AACH,QAAA,KAAK,EAAA,KAAA;KACR;AACL;;;;"}
|
package/mobile/mobile.css
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
:root {
|
|
7
7
|
--pattern-lock-min-width: 304px;
|
|
8
8
|
}
|
|
9
|
-
.pattern-
|
|
9
|
+
.pattern-lock__component_149qo {
|
|
10
10
|
margin: var(--gap-0) auto;
|
|
11
11
|
min-width: var(--pattern-lock-min-width);
|
|
12
12
|
}
|
|
13
|
-
.pattern-
|
|
13
|
+
.pattern-lock__forgotBtn_149qo {
|
|
14
14
|
margin: var(--gap-8) auto var(--gap-0);
|
|
15
15
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
require('./mobile.css');
|
|
4
4
|
|
|
5
|
-
var styles = {"component":"pattern-
|
|
5
|
+
var styles = {"component":"pattern-lock__component_149qo","forgotBtn":"pattern-lock__forgotBtn_149qo"};
|
|
6
6
|
|
|
7
7
|
module.exports = styles;
|
|
8
8
|
//# sourceMappingURL=mobile.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n margin: var(--gap-0) auto;\n min-width: var(--pattern-lock-min-width);\n}\n\n.forgotBtn {\n margin: var(--gap-8) auto var(--gap-0);\n}\n"],"names":[],"mappings":";;;;AAEgB,aAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":[],"mappings":";;;;;;;;;AAsBa,MAAA,eAAe,GAAG,UAAU,CAIrC,CACI,EACI,aAAa,GAAG,KAAK,EACrB,cAAc,GAAG,EAAE,EACnB,SAAS,EACT,UAAU,EACV,iBAAiB,GAAG,aAAa,EACjC,iBAAiB,GAAG,KAAK,EACzB,gBAAgB,EAChB,WAAW,GAAG,oBAAoB,EAClC,gBAAgB,EAChB,KAAK,EACL,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACf,EACD,GAAG,KACH;IACA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAEjC;IAEH,SAAS,CAAC,MAAK;QACX,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE;AAElD,QAAA,SAAS,CAAC;AACN,YAAA,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC;YAC7B,KAAK;YACL,MAAM;AACT,SAAA,CAAC;KACL,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACX,IAAI,aAAa,GAA4B,IAAI;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":[],"mappings":"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"}
|
|
@@ -11,35 +11,35 @@
|
|
|
11
11
|
--pattern-lock-min-height: 272px;
|
|
12
12
|
--pattern-lock-with-forgot-btn-min-height: 336px;
|
|
13
13
|
}
|
|
14
|
-
.pattern-
|
|
14
|
+
.pattern-lock__component_i3vs9 {
|
|
15
15
|
display: flex;
|
|
16
16
|
flex-direction: column;
|
|
17
17
|
align-items: center;
|
|
18
18
|
box-sizing: border-box;
|
|
19
19
|
min-height: var(--pattern-lock-min-height);
|
|
20
20
|
}
|
|
21
|
-
.pattern-
|
|
21
|
+
.pattern-lock__component_i3vs9 canvas {
|
|
22
22
|
display: block;
|
|
23
23
|
margin: var(--gap-0) auto;
|
|
24
24
|
}
|
|
25
|
-
.pattern-
|
|
25
|
+
.pattern-lock__component_i3vs9 .pattern-lock__canvasContainer_i3vs9 {
|
|
26
26
|
box-sizing: border-box;
|
|
27
27
|
padding: var(--gap-16) var(--gap-16);
|
|
28
28
|
min-width: var(--pattern-lock-min-width);
|
|
29
29
|
min-height: var(--pattern-lock-min-height);
|
|
30
30
|
}
|
|
31
|
-
.pattern-
|
|
31
|
+
.pattern-lock__component_i3vs9 .pattern-lock__canvasContainer_i3vs9 .pattern-lock__canvasInner_i3vs9 {
|
|
32
32
|
box-sizing: border-box;
|
|
33
33
|
padding: var(--gap-0) var(--gap-16);
|
|
34
34
|
min-width: var(--pattern-lock-min-height);
|
|
35
35
|
}
|
|
36
|
-
.pattern-
|
|
36
|
+
.pattern-lock__component_i3vs9.pattern-lock__disabled_i3vs9 {
|
|
37
37
|
pointer-events: none;
|
|
38
38
|
}
|
|
39
|
-
.pattern-
|
|
39
|
+
.pattern-lock__withForgotBtn_i3vs9 {
|
|
40
40
|
min-height: var(--pattern-lock-with-forgot-btn-min-height);
|
|
41
41
|
}
|
|
42
|
-
.pattern-
|
|
42
|
+
.pattern-lock__forgotBtn_i3vs9 {
|
|
43
43
|
display: block;
|
|
44
44
|
min-height: var(--size-xs-height);
|
|
45
45
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './index.css';
|
|
2
2
|
|
|
3
|
-
const commonStyles = {"component":"pattern-
|
|
3
|
+
const commonStyles = {"component":"pattern-lock__component_i3vs9","canvasContainer":"pattern-lock__canvasContainer_i3vs9","canvasInner":"pattern-lock__canvasInner_i3vs9","disabled":"pattern-lock__disabled_i3vs9","withForgotBtn":"pattern-lock__withForgotBtn_i3vs9","forgotBtn":"pattern-lock__forgotBtn_i3vs9"};
|
|
4
4
|
|
|
5
5
|
export { commonStyles as default };
|
|
6
6
|
//# sourceMappingURL=index.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"index.module.css.js","sources":["../../src/components/base-pattern-lock/index.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../../vars.css';\n\n.component {\n display: flex;\n flex-direction: column;\n align-items: center;\n box-sizing: border-box;\n min-height: var(--pattern-lock-min-height);\n\n & canvas {\n display: block;\n margin: var(--gap-0) auto;\n }\n\n & .canvasContainer {\n box-sizing: border-box;\n padding: var(--gap-16) var(--gap-16);\n min-width: var(--pattern-lock-min-width);\n min-height: var(--pattern-lock-min-height);\n\n & .canvasInner {\n box-sizing: border-box;\n padding: var(--gap-0) var(--gap-16);\n min-width: var(--pattern-lock-min-height);\n }\n }\n\n &.disabled {\n pointer-events: none;\n }\n}\n\n.withForgotBtn {\n min-height: var(--pattern-lock-with-forgot-btn-min-height);\n}\n\n.forgotBtn {\n display: block;\n min-height: var(--size-xs-height);\n}\n"],"names":[],"mappings":";;AAEgB,qBAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,iBAAiB,CAAC,qCAAqC,CAAC,aAAa,CAAC,iCAAiC,CAAC,UAAU,CAAC,8BAA8B,CAAC,eAAe,CAAC,mCAAmC,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
|
@@ -6,13 +6,13 @@
|
|
|
6
6
|
:root {
|
|
7
7
|
--pattern-lock-min-width: 304px;
|
|
8
8
|
}
|
|
9
|
-
.pattern-
|
|
9
|
+
.pattern-lock__component_17my4 {
|
|
10
10
|
margin: var(--gap-0) auto;
|
|
11
11
|
min-width: var(--pattern-lock-min-width);
|
|
12
12
|
}
|
|
13
|
-
.pattern-
|
|
13
|
+
.pattern-lock__forgotBtn_17my4 {
|
|
14
14
|
margin: var(--gap-8) auto var(--gap-0);
|
|
15
15
|
}
|
|
16
|
-
.pattern-
|
|
16
|
+
.pattern-lock__hiddenBtn_17my4 {
|
|
17
17
|
display: none;
|
|
18
18
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './desktop.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"pattern-
|
|
3
|
+
const styles = {"component":"pattern-lock__component_17my4","forgotBtn":"pattern-lock__forgotBtn_17my4","hiddenBtn":"pattern-lock__hiddenBtn_17my4"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=desktop.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"desktop.module.css.js","sources":["../src/desktop/desktop.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n margin: var(--gap-0) auto;\n min-width: var(--pattern-lock-min-width);\n}\n\n.forgotBtn {\n margin: var(--gap-8) auto var(--gap-0);\n}\n\n.hiddenBtn {\n display: none;\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":[],"mappings":";;AAIa,MAAA,qBAAqB,GAAG,CACjC,cAAmE,KACnE;AACA,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;
|
|
1
|
+
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":[],"mappings":";;AAIa,MAAA,qBAAqB,GAAG,CACjC,cAAmE,KACnE;AACA,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;AACvB,QAAA,IAAI,cAAc,CAAC,OAAO,EAAE;AACxB,YAAA,cAAc,CAAC,OAAO,CAAC,eAAe,EAAE;;AAEhD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,OAAO;QACH,KAAK;KACR;AACL;;;;"}
|
package/modern/mobile/mobile.css
CHANGED
|
@@ -6,10 +6,10 @@
|
|
|
6
6
|
:root {
|
|
7
7
|
--pattern-lock-min-width: 304px;
|
|
8
8
|
}
|
|
9
|
-
.pattern-
|
|
9
|
+
.pattern-lock__component_149qo {
|
|
10
10
|
margin: var(--gap-0) auto;
|
|
11
11
|
min-width: var(--pattern-lock-min-width);
|
|
12
12
|
}
|
|
13
|
-
.pattern-
|
|
13
|
+
.pattern-lock__forgotBtn_149qo {
|
|
14
14
|
margin: var(--gap-8) auto var(--gap-0);
|
|
15
15
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import './mobile.css';
|
|
2
2
|
|
|
3
|
-
const styles = {"component":"pattern-
|
|
3
|
+
const styles = {"component":"pattern-lock__component_149qo","forgotBtn":"pattern-lock__forgotBtn_149qo"};
|
|
4
4
|
|
|
5
5
|
export { styles as default };
|
|
6
6
|
//# sourceMappingURL=mobile.module.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/
|
|
1
|
+
{"version":3,"file":"mobile.module.css.js","sources":["../src/mobile/mobile.module.css"],"sourcesContent":["@import '@alfalab/core-components-vars/src/index.css';\n@import '../vars.css';\n\n.component {\n margin: var(--gap-0) auto;\n min-width: var(--pattern-lock-min-width);\n}\n\n.forgotBtn {\n margin: var(--gap-8) auto var(--gap-0);\n}\n"],"names":[],"mappings":";;AAEgB,eAAe,CAAC,WAAW,CAAC,+BAA+B,CAAC,WAAW,CAAC,+BAA+B,CAAC;;;;"}
|
package/modern/typings.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent } from 'react';
|
|
2
2
|
import { type ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
|
|
3
|
-
|
|
3
|
+
type ConditionalProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Показать кнопку "забыли код"
|
|
6
6
|
* @default "Забыли код?"
|
|
@@ -20,7 +20,7 @@ declare type ConditionalProps = {
|
|
|
20
20
|
onForgotBtnClick?: never;
|
|
21
21
|
forgotCodeBtnText?: never;
|
|
22
22
|
};
|
|
23
|
-
export
|
|
23
|
+
export type CommonPatternLockProps = {
|
|
24
24
|
/**
|
|
25
25
|
* Дополнительный класс
|
|
26
26
|
*/
|
|
@@ -53,7 +53,7 @@ export declare type CommonPatternLockProps = {
|
|
|
53
53
|
*/
|
|
54
54
|
disabled?: boolean;
|
|
55
55
|
} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
|
|
56
|
-
export
|
|
56
|
+
export type PrivatePatternLockProps = {
|
|
57
57
|
/**
|
|
58
58
|
* Включает ховер-эффект
|
|
59
59
|
*/
|
|
@@ -65,7 +65,7 @@ export declare type PrivatePatternLockProps = {
|
|
|
65
65
|
[key: string]: string;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
|
-
export
|
|
68
|
+
export type PatternLockProps = CommonPatternLockProps & {
|
|
69
69
|
/**
|
|
70
70
|
* Контрольная точка, с нее начинается desktop версия
|
|
71
71
|
* @default 1024
|
|
@@ -81,7 +81,7 @@ export declare type PatternLockProps = CommonPatternLockProps & {
|
|
|
81
81
|
*/
|
|
82
82
|
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
83
83
|
};
|
|
84
|
-
export
|
|
84
|
+
export type ObservableTokens = {
|
|
85
85
|
ACCENT_INITIAL: string;
|
|
86
86
|
ACCENT_SUCCESS: string;
|
|
87
87
|
ACCENT_FAILURE: string;
|
package/modern/utils.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock
|
|
|
2
2
|
export declare function getDefaultObserveTarget(): HTMLHeadElement;
|
|
3
3
|
export declare function getColorByToken(token: string): string;
|
|
4
4
|
export declare const getSizes: () => {
|
|
5
|
-
elementSizes: ThemeParams[
|
|
5
|
+
elementSizes: ThemeParams["dimens"];
|
|
6
6
|
width: number;
|
|
7
7
|
height: number;
|
|
8
8
|
};
|
package/modern/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":[],"mappings":";;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEa,MAAA,QAAQ,GAAG,CAAC,MAAK;AAC1B,IAAA,MAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;AAEtF,IAAA,OAAO,MAAK;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":[],"mappings":";;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEa,MAAA,QAAQ,GAAG,CAAC,MAAK;AAC1B,IAAA,MAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;AAEtF,IAAA,OAAO,MAAK;QACR,IAAI,UAAU,EAAE;AACZ,YAAA,OAAO,UAAU;;AAGrB,QAAA,UAAU,GAAG;YACT,YAAY,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE;AACjD,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,MAAM,EAAE,GAAG;SACd;AAED,QAAA,OAAO,UAAU;AACrB,KAAC;AACL,CAAC;AAEK,SAAU,QAAQ,CAAC,MAA6B,EAAA;AAClD,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,OAAO,EAAE,eAAe,CAAC,iBAAiB,CAAC,OAAO,CAAC;AACnD,QAAA,EAAE,EAAE,aAAa;AACjB,QAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,eAAe,CAAC;AAC1D,QAAA,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,eAAe,CAAC,iBAAiB,CAAC,WAAW,CAAC;AACrD,YAAA,KAAK,EAAE,eAAe,CAAC,iBAAiB,CAAC,WAAW,CAAC;AACxD,SAAA;KACJ;IAED,OAAO;AACH,QAAA,CAAC,WAAW,CAAC,OAAO,GAAG;AACnB,YAAA,MAAM,EAAE;AACJ,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC;AACzD,gBAAA,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC;AAC9E,aAAA;YACD,MAAM;AACT,SAAA;AACD,QAAA,CAAC,WAAW,CAAC,OAAO,GAAG;AACnB,YAAA,MAAM,EAAE;AACJ,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC;AACzD,gBAAA,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC;AAC9E,aAAA;YACD,MAAM;AACT,SAAA;AACD,QAAA,CAAC,WAAW,CAAC,OAAO,GAAG;AACnB,YAAA,MAAM,EAAE;AACJ,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC;AACzD,gBAAA,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC;AAC9E,aAAA;YACD,MAAM;AACT,SAAA;KACJ;AACL;AAEM,SAAU,qBAAqB,CAAC,UAAkB,EAAA;IACpD,OAAO;AACH,QAAA,WAAW,EAAE,UAAU;AACvB,QAAA,aAAa,EAAE,aAAa,CAAC,UAAU,EAAE,iBAAiB,CAAC;KAC9D;AACL;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":[],"mappings":";;;;;;;;;AAsBa,MAAA,eAAe,GAAG,UAAU,CAIrC,CACI,EACI,aAAa,GAAG,KAAK,EACrB,cAAc,GAAG,EAAE,EACnB,SAAS,EACT,UAAU,EACV,iBAAiB,GAAG,aAAa,EACjC,iBAAiB,GAAG,KAAK,EACzB,gBAAgB,EAChB,WAAW,GAAG,oBAAoB,EAClC,gBAAgB,EAChB,KAAK,EACL,MAAM,GAAG,EAAE,EACX,QAAQ,GAAG,KAAK,EAChB,GAAG,SAAS,EACf,EACD,GAAG,KACH;IACA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,EAEjC;IAEH,SAAS,CAAC,MAAK;QACX,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE;AAElD,QAAA,SAAS,CAAC;AACN,YAAA,KAAK,EAAE,QAAQ,CAAC,YAAY,CAAC;YAC7B,KAAK;YACL,MAAM;AACT,SAAA,CAAC;KACL,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;QACX,IAAI,aAAa,GAA4B,IAAI;
|
|
1
|
+
{"version":3,"file":"Component.js","sources":["../../../src/components/base-pattern-lock/Component.tsx"],"sourcesContent":["import React, { forwardRef, useEffect, useState } from 'react';\nimport cn from 'classnames';\n\nimport { ButtonMobile } from '@alfalab/core-components-button/mobile';\nimport { getDataTestId } from '@alfalab/core-components-shared';\nimport {\n ReactCanvasPatternLock,\n type Theme,\n type TPatternLockInstance,\n} from '@alfalab/react-canvas-pattern-lock';\n\nimport {\n DEFAULT_EXTRA_BOUNDS,\n OBSERVABLE_TOKENS,\n OBSERVE_OPTIONS,\n THEME_STATE,\n} from '../../consts';\nimport { type CommonPatternLockProps, type PrivatePatternLockProps } from '../../typings';\nimport { getColorByToken, getDefaultObserveTarget, getSizes, getTheme } from '../../utils';\n\nimport commonStyles from './index.module.css';\n\nexport const BasePatternLock = forwardRef<\n TPatternLockInstance,\n CommonPatternLockProps & PrivatePatternLockProps\n>(\n (\n {\n observeTokens = false,\n observerParams = {},\n className,\n dataTestId,\n forgotCodeBtnText = 'Забыли код?',\n showForgotCodeBtn = false,\n onForgotBtnClick,\n extraBounds = DEFAULT_EXTRA_BOUNDS,\n messageClassName,\n hover,\n styles = {},\n disabled = false,\n ...restProps\n },\n ref,\n ) => {\n const [params, setParams] = useState<\n { theme: Theme; width: number; height: number } | undefined\n >();\n\n useEffect(() => {\n const { elementSizes, width, height } = getSizes();\n\n setParams({\n theme: getTheme(elementSizes),\n width,\n height,\n });\n }, []);\n\n useEffect(() => {\n let styleObserver: MutationObserver | null = null;\n\n if (observeTokens) {\n const { options = OBSERVE_OPTIONS, getTarget = getDefaultObserveTarget } =\n observerParams;\n\n styleObserver = new MutationObserver(() =>\n setParams((prevState) => {\n const { width, height, elementSizes } = getSizes();\n\n if (!prevState) {\n return { theme: getTheme(elementSizes), width, height };\n }\n\n const prevBgColor = prevState.theme[THEME_STATE.INITIAL].colors.primary;\n const themeChanged =\n prevBgColor !== getColorByToken(OBSERVABLE_TOKENS.PRIMARY);\n\n if (themeChanged) return { ...prevState, theme: getTheme(elementSizes) };\n\n return prevState;\n }),\n );\n\n styleObserver.observe(getTarget(), options);\n }\n\n return () => styleObserver?.disconnect();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [observeTokens]);\n\n return (\n <div\n className={cn(commonStyles.component, styles.component, className, {\n [commonStyles.hidden]: !params,\n [commonStyles.withForgotBtn]: showForgotCodeBtn,\n [commonStyles.disabled]: disabled,\n })}\n data-test-id={dataTestId}\n >\n <div className={commonStyles.canvasContainer}>\n <div className={commonStyles.canvasInner}>\n <ReactCanvasPatternLock\n {...restProps}\n {...params}\n ref={ref}\n rows={3}\n cols={3}\n justifyNodes='space-between'\n extraBounds={extraBounds}\n hover={hover}\n />\n </div>\n </div>\n {showForgotCodeBtn && (\n <ButtonMobile\n view='transparent'\n className={cn(commonStyles.forgotBtn, styles.forgotBtn)}\n onClick={onForgotBtnClick}\n dataTestId={getDataTestId(dataTestId, 'forgot-code-btn')}\n >\n {forgotCodeBtnText}\n </ButtonMobile>\n )}\n </div>\n );\n },\n);\n\nBasePatternLock.displayName = 'BasePatternLock';\nReactCanvasPatternLock.displayName = 'ReactCanvasPatternLock';\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":[],"mappings":";;AAIa,MAAA,qBAAqB,GAAG,CACjC,cAAmE,KACnE;AACA,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;
|
|
1
|
+
{"version":3,"file":"use-pattern-lock-cleanup.js","sources":["../../src/hooks/use-pattern-lock-cleanup.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport { type TPatternLockInstance } from '@alfalab/react-canvas-pattern-lock';\n\nexport const usePatternLockCleanup = (\n patternLockRef: React.MutableRefObject<TPatternLockInstance | null>,\n) => {\n const clear = useMemo(() => {\n if (patternLockRef.current) {\n patternLockRef.current.setInitialState();\n }\n }, [patternLockRef]);\n\n return {\n clear,\n };\n};\n"],"names":[],"mappings":";;AAIa,MAAA,qBAAqB,GAAG,CACjC,cAAmE,KACnE;AACA,IAAA,MAAM,KAAK,GAAG,OAAO,CAAC,MAAK;AACvB,QAAA,IAAI,cAAc,CAAC,OAAO,EAAE;AACxB,YAAA,cAAc,CAAC,OAAO,CAAC,eAAe,EAAE;;AAEhD,KAAC,EAAE,CAAC,cAAc,CAAC,CAAC;IAEpB,OAAO;QACH,KAAK;KACR;AACL;;;;"}
|
package/moderncssm/typings.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent } from 'react';
|
|
2
2
|
import { type ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
|
|
3
|
-
|
|
3
|
+
type ConditionalProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Показать кнопку "забыли код"
|
|
6
6
|
* @default "Забыли код?"
|
|
@@ -20,7 +20,7 @@ declare type ConditionalProps = {
|
|
|
20
20
|
onForgotBtnClick?: never;
|
|
21
21
|
forgotCodeBtnText?: never;
|
|
22
22
|
};
|
|
23
|
-
export
|
|
23
|
+
export type CommonPatternLockProps = {
|
|
24
24
|
/**
|
|
25
25
|
* Дополнительный класс
|
|
26
26
|
*/
|
|
@@ -53,7 +53,7 @@ export declare type CommonPatternLockProps = {
|
|
|
53
53
|
*/
|
|
54
54
|
disabled?: boolean;
|
|
55
55
|
} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
|
|
56
|
-
export
|
|
56
|
+
export type PrivatePatternLockProps = {
|
|
57
57
|
/**
|
|
58
58
|
* Включает ховер-эффект
|
|
59
59
|
*/
|
|
@@ -65,7 +65,7 @@ export declare type PrivatePatternLockProps = {
|
|
|
65
65
|
[key: string]: string;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
|
-
export
|
|
68
|
+
export type PatternLockProps = CommonPatternLockProps & {
|
|
69
69
|
/**
|
|
70
70
|
* Контрольная точка, с нее начинается desktop версия
|
|
71
71
|
* @default 1024
|
|
@@ -81,7 +81,7 @@ export declare type PatternLockProps = CommonPatternLockProps & {
|
|
|
81
81
|
*/
|
|
82
82
|
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
83
83
|
};
|
|
84
|
-
export
|
|
84
|
+
export type ObservableTokens = {
|
|
85
85
|
ACCENT_INITIAL: string;
|
|
86
86
|
ACCENT_SUCCESS: string;
|
|
87
87
|
ACCENT_FAILURE: string;
|
package/moderncssm/utils.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock
|
|
|
2
2
|
export declare function getDefaultObserveTarget(): HTMLHeadElement;
|
|
3
3
|
export declare function getColorByToken(token: string): string;
|
|
4
4
|
export declare const getSizes: () => {
|
|
5
|
-
elementSizes: ThemeParams[
|
|
5
|
+
elementSizes: ThemeParams["dimens"];
|
|
6
6
|
width: number;
|
|
7
7
|
height: number;
|
|
8
8
|
};
|
package/moderncssm/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":[],"mappings":";;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEa,MAAA,QAAQ,GAAG,CAAC,MAAK;AAC1B,IAAA,MAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;AAEtF,IAAA,OAAO,MAAK;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":[],"mappings":";;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEa,MAAA,QAAQ,GAAG,CAAC,MAAK;AAC1B,IAAA,MAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;AAEtF,IAAA,OAAO,MAAK;QACR,IAAI,UAAU,EAAE;AACZ,YAAA,OAAO,UAAU;;AAGrB,QAAA,UAAU,GAAG;YACT,YAAY,EAAE,EAAE,GAAG,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE;AACjD,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,MAAM,EAAE,GAAG;SACd;AAED,QAAA,OAAO,UAAU;AACrB,KAAC;AACL,CAAC;AAEK,SAAU,QAAQ,CAAC,MAA6B,EAAA;AAClD,IAAA,MAAM,UAAU,GAAG;AACf,QAAA,OAAO,EAAE,eAAe,CAAC,iBAAiB,CAAC,OAAO,CAAC;AACnD,QAAA,EAAE,EAAE,aAAa;AACjB,QAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,eAAe,CAAC;AAC1D,QAAA,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,eAAe,CAAC,iBAAiB,CAAC,WAAW,CAAC;AACrD,YAAA,KAAK,EAAE,eAAe,CAAC,iBAAiB,CAAC,WAAW,CAAC;AACxD,SAAA;KACJ;IAED,OAAO;AACH,QAAA,CAAC,WAAW,CAAC,OAAO,GAAG;AACnB,YAAA,MAAM,EAAE;AACJ,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC;AACzD,gBAAA,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC;AAC9E,aAAA;YACD,MAAM;AACT,SAAA;AACD,QAAA,CAAC,WAAW,CAAC,OAAO,GAAG;AACnB,YAAA,MAAM,EAAE;AACJ,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC;AACzD,gBAAA,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC;AAC9E,aAAA;YACD,MAAM;AACT,SAAA;AACD,QAAA,CAAC,WAAW,CAAC,OAAO,GAAG;AACnB,YAAA,MAAM,EAAE;AACJ,gBAAA,GAAG,UAAU;AACb,gBAAA,MAAM,EAAE,eAAe,CAAC,iBAAiB,CAAC,cAAc,CAAC;AACzD,gBAAA,cAAc,EAAE,eAAe,CAAC,iBAAiB,CAAC,wBAAwB,CAAC;AAC9E,aAAA;YACD,MAAM;AACT,SAAA;KACJ;AACL;AAEM,SAAU,qBAAqB,CAAC,UAAkB,EAAA;IACpD,OAAO;AACH,QAAA,WAAW,EAAE,UAAU;AACvB,QAAA,aAAa,EAAE,aAAa,CAAC,UAAU,EAAE,iBAAiB,CAAC;KAC9D;AACL;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-pattern-lock",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.4",
|
|
4
4
|
"description": "Pattern lock",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
"main": "index.js",
|
|
11
11
|
"module": "./esm/index.js",
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@alfalab/core-components-button": "13.1.
|
|
14
|
-
"@alfalab/core-components-mq": "6.0.
|
|
15
|
-
"@alfalab/core-components-shared": "2.1.
|
|
13
|
+
"@alfalab/core-components-button": "^13.1.1",
|
|
14
|
+
"@alfalab/core-components-mq": "^6.0.3",
|
|
15
|
+
"@alfalab/core-components-shared": "^2.1.1",
|
|
16
16
|
"@alfalab/react-canvas-pattern-lock": "^2.0.7",
|
|
17
17
|
"classnames": "^2.5.1",
|
|
18
18
|
"tslib": "^2.4.0"
|
|
@@ -25,6 +25,6 @@
|
|
|
25
25
|
"access": "public",
|
|
26
26
|
"directory": "dist"
|
|
27
27
|
},
|
|
28
|
-
"themesVersion": "15.0.2
|
|
29
|
-
"varsVersion": "11.0.
|
|
28
|
+
"themesVersion": "15.0.2",
|
|
29
|
+
"varsVersion": "11.0.2"
|
|
30
30
|
}
|
package/typings.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type MouseEvent } from 'react';
|
|
2
2
|
import { type ReactPatternLockProps } from '@alfalab/react-canvas-pattern-lock';
|
|
3
|
-
|
|
3
|
+
type ConditionalProps = {
|
|
4
4
|
/**
|
|
5
5
|
* Показать кнопку "забыли код"
|
|
6
6
|
* @default "Забыли код?"
|
|
@@ -20,7 +20,7 @@ declare type ConditionalProps = {
|
|
|
20
20
|
onForgotBtnClick?: never;
|
|
21
21
|
forgotCodeBtnText?: never;
|
|
22
22
|
};
|
|
23
|
-
export
|
|
23
|
+
export type CommonPatternLockProps = {
|
|
24
24
|
/**
|
|
25
25
|
* Дополнительный класс
|
|
26
26
|
*/
|
|
@@ -53,7 +53,7 @@ export declare type CommonPatternLockProps = {
|
|
|
53
53
|
*/
|
|
54
54
|
disabled?: boolean;
|
|
55
55
|
} & Omit<ReactPatternLockProps, 'theme' | 'width' | 'height' | 'rows' | 'cols' | 'hover' | 'justifyNodes'> & ConditionalProps;
|
|
56
|
-
export
|
|
56
|
+
export type PrivatePatternLockProps = {
|
|
57
57
|
/**
|
|
58
58
|
* Включает ховер-эффект
|
|
59
59
|
*/
|
|
@@ -65,7 +65,7 @@ export declare type PrivatePatternLockProps = {
|
|
|
65
65
|
[key: string]: string;
|
|
66
66
|
};
|
|
67
67
|
};
|
|
68
|
-
export
|
|
68
|
+
export type PatternLockProps = CommonPatternLockProps & {
|
|
69
69
|
/**
|
|
70
70
|
* Контрольная точка, с нее начинается desktop версия
|
|
71
71
|
* @default 1024
|
|
@@ -81,7 +81,7 @@ export declare type PatternLockProps = CommonPatternLockProps & {
|
|
|
81
81
|
*/
|
|
82
82
|
defaultMatchMediaValue?: boolean | (() => boolean);
|
|
83
83
|
};
|
|
84
|
-
export
|
|
84
|
+
export type ObservableTokens = {
|
|
85
85
|
ACCENT_INITIAL: string;
|
|
86
86
|
ACCENT_SUCCESS: string;
|
|
87
87
|
ACCENT_FAILURE: string;
|
package/utils.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock
|
|
|
2
2
|
export declare function getDefaultObserveTarget(): HTMLHeadElement;
|
|
3
3
|
export declare function getColorByToken(token: string): string;
|
|
4
4
|
export declare const getSizes: () => {
|
|
5
|
-
elementSizes: ThemeParams[
|
|
5
|
+
elementSizes: ThemeParams["dimens"];
|
|
6
6
|
width: number;
|
|
7
7
|
height: number;
|
|
8
8
|
};
|
package/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":["OBSERVABLE_TOKENS","THEME_STATE","__assign","getDataTestId"],"mappings":";;;;;;;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEO,IAAM,QAAQ,GAAG,CAAC,YAAA;AACrB,IAAA,IAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;IAEtF,OAAO,YAAA;
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["src/utils.ts"],"sourcesContent":["import { getDataTestId } from '@alfalab/core-components-shared';\nimport { type Theme, type ThemeParams } from '@alfalab/react-canvas-pattern-lock';\n\nimport { OBSERVABLE_TOKENS, THEME_STATE } from './consts';\n\nexport function getDefaultObserveTarget() {\n return document.head;\n}\n\nexport function getColorByToken(token: string) {\n return getComputedStyle(document.documentElement).getPropertyValue(token);\n}\n\nexport const getSizes = (() => {\n const COMMON_SIZES = {\n lineWidth: 6,\n nodeRing: 0,\n nodeCore: 12,\n };\n\n let cachedSize: { elementSizes: ThemeParams['dimens']; width: number; height: number };\n\n return () => {\n if (cachedSize) {\n return cachedSize;\n }\n\n cachedSize = {\n elementSizes: { ...COMMON_SIZES, nodeRadius: 32 },\n width: 240,\n height: 240,\n };\n\n return cachedSize;\n };\n})();\n\nexport function getTheme(dimens: ThemeParams['dimens']): Theme {\n const baseColors = {\n primary: getColorByToken(OBSERVABLE_TOKENS.PRIMARY),\n bg: 'transparent',\n ringBg: getColorByToken(OBSERVABLE_TOKENS.RING_BG_INITIAL),\n hover: {\n inner: getColorByToken(OBSERVABLE_TOKENS.HOVER_INNER),\n outer: getColorByToken(OBSERVABLE_TOKENS.HOVER_OUTER),\n },\n };\n\n return {\n [THEME_STATE.INITIAL]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_INITIAL),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_INITIAL),\n },\n dimens,\n },\n [THEME_STATE.SUCCESS]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_SUCCESS),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_SUCCESS),\n },\n dimens,\n },\n [THEME_STATE.FAILURE]: {\n colors: {\n ...baseColors,\n accent: getColorByToken(OBSERVABLE_TOKENS.ACCENT_FAILURE),\n selectedRingBg: getColorByToken(OBSERVABLE_TOKENS.SELECTED_RING_BG_FAILURE),\n },\n dimens,\n },\n };\n}\n\nexport function getPatternLockTestIds(dataTestId: string) {\n return {\n patternLock: dataTestId,\n forgotCodeBtn: getDataTestId(dataTestId, 'forgot-code-btn'),\n };\n}\n"],"names":["OBSERVABLE_TOKENS","THEME_STATE","__assign","getDataTestId"],"mappings":";;;;;;;;SAKgB,uBAAuB,GAAA;IACnC,OAAO,QAAQ,CAAC,IAAI;AACxB;AAEM,SAAU,eAAe,CAAC,KAAa,EAAA;IACzC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,gBAAgB,CAAC,KAAK,CAAC;AAC7E;AAEO,IAAM,QAAQ,GAAG,CAAC,YAAA;AACrB,IAAA,IAAM,YAAY,GAAG;AACjB,QAAA,SAAS,EAAE,CAAC;AACZ,QAAA,QAAQ,EAAE,CAAC;AACX,QAAA,QAAQ,EAAE,EAAE;KACf;AAED,IAAA,IAAI,UAAkF;IAEtF,OAAO,YAAA;QACH,IAAI,UAAU,EAAE;AACZ,YAAA,OAAO,UAAU;;AAGrB,QAAA,UAAU,GAAG;AACT,YAAA,YAAY,oCAAO,YAAY,CAAA,EAAA,EAAE,UAAU,EAAE,EAAE,EAAE,CAAA;AACjD,YAAA,KAAK,EAAE,GAAG;AACV,YAAA,MAAM,EAAE,GAAG;SACd;AAED,QAAA,OAAO,UAAU;AACrB,KAAC;AACL,CAAC;AAEK,SAAU,QAAQ,CAAC,MAA6B,EAAA;;AAClD,IAAA,IAAM,UAAU,GAAG;AACf,QAAA,OAAO,EAAE,eAAe,CAACA,wBAAiB,CAAC,OAAO,CAAC;AACnD,QAAA,EAAE,EAAE,aAAa;AACjB,QAAA,MAAM,EAAE,eAAe,CAACA,wBAAiB,CAAC,eAAe,CAAC;AAC1D,QAAA,KAAK,EAAE;AACH,YAAA,KAAK,EAAE,eAAe,CAACA,wBAAiB,CAAC,WAAW,CAAC;AACrD,YAAA,KAAK,EAAE,eAAe,CAACA,wBAAiB,CAAC,WAAW,CAAC;AACxD,SAAA;KACJ;AAED,IAAA,OAAA,EAAA,GAAA,EAAA;QACI,EAAC,CAAAC,kBAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAACF,wBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAACA,wBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;QACD,EAAC,CAAAC,kBAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAACF,wBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAACA,wBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;QACD,EAAC,CAAAC,kBAAW,CAAC,OAAO,CAAG,GAAA;YACnB,MAAM,EAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EACC,UAAU,CACb,EAAA,EAAA,MAAM,EAAE,eAAe,CAACF,wBAAiB,CAAC,cAAc,CAAC,EACzD,cAAc,EAAE,eAAe,CAACA,wBAAiB,CAAC,wBAAwB,CAAC,EAC9E,CAAA;AACD,YAAA,MAAM,EAAA,MAAA;AACT,SAAA;AACH,QAAA,EAAA;AACN;AAEM,SAAU,qBAAqB,CAAC,UAAkB,EAAA;IACpD,OAAO;AACH,QAAA,WAAW,EAAE,UAAU;AACvB,QAAA,aAAa,EAAEG,kCAAa,CAAC,UAAU,EAAE,iBAAiB,CAAC;KAC9D;AACL;;;;;;;;"}
|