@activecollab/components 1.0.207 → 1.0.209
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/dist/cjs/components/Button/Styles.js +6 -6
- package/dist/cjs/components/Button/Styles.js.map +1 -1
- package/dist/cjs/components/ConfirmDialog/ConfirmDialog.js +9 -4
- package/dist/cjs/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
- package/dist/cjs/components/CounterButton/Styles.js +1 -1
- package/dist/cjs/components/CounterButton/Styles.js.map +1 -1
- package/dist/esm/components/Button/Styles.js +6 -6
- package/dist/esm/components/Button/Styles.js.map +1 -1
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.d.ts +1 -0
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.d.ts.map +1 -1
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.js +9 -4
- package/dist/esm/components/ConfirmDialog/ConfirmDialog.js.map +1 -1
- package/dist/esm/components/CounterButton/Styles.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/Styles.js +1 -1
- package/dist/esm/components/CounterButton/Styles.js.map +1 -1
- package/dist/index.js +16 -11
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -18,17 +18,17 @@ var StyledButton = _styledComponents.default.button.withConfig({
|
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
|
|
20
20
|
}, function (props) {
|
|
21
|
-
return (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
21
|
+
return (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
22
22
|
}, function (props) {
|
|
23
|
-
return (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
23
|
+
return (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
24
24
|
}, function (props) {
|
|
25
|
-
return props.variant === "dark transparent" && (0, _styledComponents.css)(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
25
|
+
return props.variant === "dark transparent" && (0, _styledComponents.css)(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
26
26
|
}, function (props) {
|
|
27
|
-
return (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
27
|
+
return (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
28
28
|
}, function (props) {
|
|
29
|
-
return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
29
|
+
return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
30
30
|
}, function (props) {
|
|
31
|
-
return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
31
|
+
return props.variant === "circle raised" && (0, _styledComponents.css)(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
32
32
|
}, function (props) {
|
|
33
33
|
return props.iconOnly && (0, _styledComponents.css)(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && (0, _styledComponents.css)(["width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["width:40px;"]));
|
|
34
34
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAM5C,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,0jBACrCC,oBAAS,EACTC,8BAAc,EAqCd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,QACtBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,QACpBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,SAAS,IAAIH,KAAK,CAACG,OAAO,KAAK,WAAW,SAC7DD,qBAAG,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus-visible {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus-visible {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAM5C,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,0jBACrCC,oBAAS,EACTC,8BAAc,EAqCd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,QACtBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,QACpBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,SAAS,IAAIH,KAAK,CAACG,OAAO,KAAK,WAAW,SAC7DD,qBAAG,0VAgBF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,WAAW,IAAIH,KAAK,CAACG,OAAO,KAAK,UAAU,SAC9DD,qBAAG,kWAkBF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,OAAO,KAAK,kBAAkB,QACpCD,qBAAG,mNAcF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,UAAU,IAAIH,KAAK,CAACG,OAAO,KAAK,cAAc,SACjED,qBAAG,iOAcF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,QAAQ,IAAIH,KAAK,CAACG,OAAO,KAAK,WAAW,SAC5DD,qBAAG,yRAgBF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,OAAO,KAAK,eAAe,QACjCD,qBAAG,+SAgBF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACI,QAAQ,QACdF,qBAAG,yGAOC,CAACF,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,SACjDC,qBAAG,0CAEF,EAECF,KAAK,CAACC,IAAI,KAAK,OAAO,QACxBC,qBAAG,kBAEF,EAECF,KAAK,CAACC,IAAI,KAAK,KAAK,QACtBC,qBAAG,kBAEF,CACF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,SAAS,IAC1BH,KAAK,CAACG,OAAO,KAAK,WAAW,IAC7BH,KAAK,CAACG,OAAO,KAAK,WAAW,IAC7BH,KAAK,CAACG,OAAO,KAAK,UAAU,SAC9BD,qBAAG,oIAQC,CAACF,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,SACjDC,qBAAG,0CAEF,CACF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,UAAU,IAC3BH,KAAK,CAACG,OAAO,KAAK,cAAc,IAChCH,KAAK,CAACG,OAAO,KAAK,QAAQ,IAC1BH,KAAK,CAACG,OAAO,KAAK,WAAW,IAC7BH,KAAK,CAACG,OAAO,KAAK,kBAAkB,SACtCD,qBAAG,yIAOCF,KAAK,CAACC,IAAI,KAAK,OAAO,QACxBC,qBAAG,oCAEF,EACCF,KAAK,CAACC,IAAI,KAAK,KAAK,QACtBC,qBAAG,oCAEF,CACF;AAAA,EACJ;AAAC;AAEFP,YAAY,CAACU,WAAW,GAAG,cAAc;AAElC,IAAMC,oBAAoB,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,wCAG9C;AAAC;AAEFD,oBAAoB,CAACD,WAAW,GAAG,sBAAsB;AAElD,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8CAK7C;AAAC;AAEFC,mBAAmB,CAACH,WAAW,GAAG,qBAAqB"}
|
|
@@ -28,12 +28,15 @@ var ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
28
28
|
_ref$cancelBtnText = _ref.cancelBtnText,
|
|
29
29
|
cancelBtnText = _ref$cancelBtnText === void 0 ? "Cancel" : _ref$cancelBtnText,
|
|
30
30
|
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
|
|
31
|
-
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel
|
|
31
|
+
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
|
|
32
|
+
_ref$isLoading = _ref.isLoading,
|
|
33
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
|
|
32
34
|
return /*#__PURE__*/_react.default.createElement(_Dialog.Dialog, {
|
|
33
35
|
ref: ref,
|
|
34
36
|
open: open,
|
|
35
37
|
onClose: onCancel,
|
|
36
|
-
className: (0, _classnames.default)("c-confirm-dialog", className)
|
|
38
|
+
className: (0, _classnames.default)("c-confirm-dialog", className),
|
|
39
|
+
disableCloseOnEsc: isLoading
|
|
37
40
|
}, /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, null, dialogTitle), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContentDivider, null), /*#__PURE__*/_react.default.createElement(_Dialog.DialogContent, null, /*#__PURE__*/_react.default.createElement(_Body.Body2, {
|
|
38
41
|
lineHeight: "loose",
|
|
39
42
|
color: "secondary",
|
|
@@ -43,12 +46,14 @@ var ConfirmDialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
43
46
|
style: {
|
|
44
47
|
marginRight: "12px"
|
|
45
48
|
},
|
|
46
|
-
onClick: onConfirm
|
|
49
|
+
onClick: onConfirm,
|
|
50
|
+
disabled: isLoading
|
|
47
51
|
}, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/_react.default.createElement(_Button.Button, {
|
|
48
52
|
variant: "secondary",
|
|
49
53
|
"data-action": "cancel",
|
|
50
54
|
onClick: onCancel,
|
|
51
|
-
type: "button"
|
|
55
|
+
type: "button",
|
|
56
|
+
disabled: isLoading
|
|
52
57
|
}, cancelBtnText) : null));
|
|
53
58
|
});
|
|
54
59
|
exports.ConfirmDialog = ConfirmDialog;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.js","names":["ConfirmDialog","forwardRef","ref","open","onCancel","onConfirm","className","dialogTitle","dialogContent","confirmBtnText","cancelBtnText","shouldShowCancelButton","classnames","marginRight","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport {\n Dialog,\n DialogTitle,\n DialogContent,\n DialogActions,\n DialogContentDivider,\n} from \"../Dialog\";\nimport { Button } from \"../Button/Button\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface IConfirmDialog {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, IConfirmDialog>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n },\n ref\n ) => {\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n >\n <DialogTitle>{dialogTitle}</DialogTitle>\n <DialogContentDivider />\n <DialogContent>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </DialogContent>\n <DialogContentDivider />\n <DialogActions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </DialogActions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAOA;AACA;AAAqD;AAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","names":["ConfirmDialog","forwardRef","ref","open","onCancel","onConfirm","className","dialogTitle","dialogContent","confirmBtnText","cancelBtnText","shouldShowCancelButton","isLoading","classnames","marginRight","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport {\n Dialog,\n DialogTitle,\n DialogContent,\n DialogActions,\n DialogContentDivider,\n} from \"../Dialog\";\nimport { Button } from \"../Button/Button\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface IConfirmDialog {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, IConfirmDialog>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n },\n ref\n ) => {\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n >\n <DialogTitle>{dialogTitle}</DialogTitle>\n <DialogContentDivider />\n <DialogContent>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </DialogContent>\n <DialogContentDivider />\n <DialogActions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </DialogActions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAOA;AACA;AAAqD;AAAA;AAAA;AAe9C,IAAMA,aAAa,gBAAG,IAAAC,iBAAU,EACrC,gBAaEC,GAAG,EACA;EAAA,qBAZDC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IAAA,wBACTC,WAAW;IAAXA,WAAW,iCAAG,kBAAkB;IAAA,0BAChCC,aAAa;IAAbA,aAAa,mCAAG,mCAAmC;IAAA,2BACnDC,cAAc;IAAdA,cAAc,oCAAG,IAAI;IAAA,0BACrBC,aAAa;IAAbA,aAAa,mCAAG,QAAQ;IAAA,6BACxBC,sBAAsB;IAAtBA,sBAAsB,sCAAG,IAAI;IAAA,sBAC7BC,SAAS;IAATA,SAAS,+BAAG,KAAK;EAInB,oBACE,6BAAC,cAAM;IACL,GAAG,EAAEV,GAAI;IACT,IAAI,EAAEC,IAAK;IACX,OAAO,EAAEC,QAAS;IAClB,SAAS,EAAE,IAAAS,mBAAU,EAAC,kBAAkB,EAAEP,SAAS,CAAE;IACrD,iBAAiB,EAAEM;EAAU,gBAE7B,6BAAC,mBAAW,QAAEL,WAAW,CAAe,eACxC,6BAAC,4BAAoB,OAAG,eACxB,6BAAC,qBAAa,qBACZ,6BAAC,WAAK;IAAC,UAAU,EAAC,OAAO;IAAC,KAAK,EAAC,WAAW;IAAC,UAAU,EAAC;EAAU,GAC9DC,aAAa,CACR,CACM,eAChB,6BAAC,4BAAoB,OAAG,eACxB,6BAAC,qBAAa,qBACZ,6BAAC,cAAM;IACL,OAAO,EAAC,SAAS;IACjB,KAAK,EAAE;MAAEM,WAAW,EAAE;IAAO,CAAE;IAC/B,OAAO,EAAET,SAAU;IACnB,QAAQ,EAAEO;EAAU,GAEnBH,cAAc,CACR,EACRE,sBAAsB,gBACrB,6BAAC,cAAM;IACL,OAAO,EAAC,WAAW;IACnB,eAAY,QAAQ;IACpB,OAAO,EAAEP,QAAS;IAClB,IAAI,EAAC,QAAQ;IACb,QAAQ,EAAEQ;EAAU,GAEnBF,aAAa,CACP,GACP,IAAI,CACM,CACT;AAEb,CAAC,CACF;AAAC;AAEFV,aAAa,CAACe,WAAW,GAAG,eAAe"}
|
|
@@ -39,7 +39,7 @@ StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
|
39
39
|
var StyledCounterButtonReset = (0, _styledComponents.default)(_Button.Button).withConfig({
|
|
40
40
|
displayName: "Styles__StyledCounterButtonReset",
|
|
41
41
|
componentId: "sc-1ecrcba-3"
|
|
42
|
-
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
42
|
+
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
43
43
|
exports.StyledCounterButtonReset = StyledCounterButtonReset;
|
|
44
44
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
45
45
|
var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withConfig({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","css","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAyC;AAAA;AAOlC,IAAMA,0BAA0B,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXC,oBAAS,EACTC,8BAAc,CAEjB;AAAC;AAEFJ,0BAA0B,CAACK,WAAW,GAAG,4BAA4B;AAE9D,IAAMC,mBAAmB,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbC,qBAAG,iGAUF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,wGAIF;AAAA,EACJ;AAAC;AAEFJ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEhD,IAAMO,0BAA0B,GAAGX,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAAC;AAEFU,0BAA0B,CAACP,WAAW,GAAG,4BAA4B;AAE9D,IAAMQ,wBAAwB,GAAG,IAAAZ,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,+
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","css","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAyC;AAAA;AAOlC,IAAMA,0BAA0B,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXC,oBAAS,EACTC,8BAAc,CAEjB;AAAC;AAEFJ,0BAA0B,CAACK,WAAW,GAAG,4BAA4B;AAE9D,IAAMC,mBAAmB,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbC,qBAAG,iGAUF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,wGAIF;AAAA,EACJ;AAAC;AAEFJ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEhD,IAAMO,0BAA0B,GAAGX,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAAC;AAEFU,0BAA0B,CAACP,WAAW,GAAG,4BAA4B;AAE9D,IAAMQ,wBAAwB,GAAG,IAAAZ,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAAC;AAEFM,wBAAwB,CAACR,WAAW,GAAG,0BAA0B;AAE1D,IAAMS,wBAAwB,GAAG,IAAAb,yBAAM,EAACc,WAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BT,mBAAmB,EACjB,UAACE,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,QACdC,qBAAG,oCAEF;AAAA,GAGH,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbC,qBAAG,kCAEF;AAAA,EACJ;AAAC;AAEFI,wBAAwB,CAACT,WAAW,GAAG,0BAA0B"}
|
|
@@ -9,17 +9,17 @@ export var StyledButton = styled.button.withConfig({
|
|
|
9
9
|
}, function (props) {
|
|
10
10
|
return props.size === "big" && css(["height:40px;"]);
|
|
11
11
|
}, function (props) {
|
|
12
|
-
return (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
12
|
+
return (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
13
13
|
}, function (props) {
|
|
14
|
-
return (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
14
|
+
return (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
15
15
|
}, function (props) {
|
|
16
|
-
return props.variant === "dark transparent" && css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
16
|
+
return props.variant === "dark transparent" && css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
17
17
|
}, function (props) {
|
|
18
|
-
return (props.variant === "tertiary" || props.variant === "text colored") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
18
|
+
return (props.variant === "tertiary" || props.variant === "text colored") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
19
19
|
}, function (props) {
|
|
20
|
-
return (props.variant === "option" || props.variant === "text gray") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
20
|
+
return (props.variant === "option" || props.variant === "text gray") && css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
21
21
|
}, function (props) {
|
|
22
|
-
return props.variant === "circle raised" && css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
22
|
+
return props.variant === "circle raised" && css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
23
23
|
}, function (props) {
|
|
24
24
|
return props.iconOnly && css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && css(["width:24px;"]), props.size === "big" && css(["width:40px;"]));
|
|
25
25
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,OAAO,IAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAM;EAAA;EAAA;AAAA,0jBACrCH,SAAS,EACTC,cAAc,EAqCd,UAACG,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,IACtBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,IACpBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,SAAS,IAAIF,KAAK,CAACE,OAAO,KAAK,WAAW,KAC7DP,GAAG,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n ${(props) =>\n props.size === \"small\" &&\n css`\n height: 24px;\n `}\n\n ${(props) =>\n props.size === \"big\" &&\n css`\n height: 40px;\n `}\n\n ${(props) =>\n (props.variant === \"primary\" || props.variant === \"contained\") &&\n css`\n padding: 0 16px;\n background-color: var(--color-primary);\n border-radius: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\n &:hover,\n &:focus-visible {\n box-shadow: 0 3px 6px -2px var(--color-primary-500);\n background-color: var(--color-primary-800);\n }\n\n &:active {\n box-shadow: 0 4px 10px -2px var(--color-primary-600);\n background-color: var(--color-primary-800);\n }\n `}\n\n ${(props) =>\n (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n css`\n padding: 0 16px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n border-color: var(--color-primary);\n color: var(--color-primary);\n }\n\n &:active {\n border-color: var(--color-primary);\n color: var(--color-primary);\n background-color: var(--color-primary-200);\n }\n `}\n\n ${(props) =>\n props.variant === \"dark transparent\" &&\n css`\n padding: 0 8px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: var(--ac-br-6);\n color: var(--only-white);\n\n &:hover,\n &:focus-visible {\n background-color: rgba(0, 0, 0, 0.85);\n }\n\n &:active {\n background-color: var(--only-black);\n }\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-200);\n }\n\n &:active {\n background-color: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n (props.variant === \"option\" || props.variant === \"text gray\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-theme-300);\n color: var(--color-theme-900);\n }\n\n &:active {\n background-color: var(--color-theme-400);\n color: var(--color-theme-900);\n }\n `}\n\n ${(props) =>\n props.variant === \"circle raised\" &&\n css`\n padding: 0 6px;\n background-color: transparent;\n border-radius: var(--ac-br-rounded);\n color: var(--color-theme-700);\n\n &:hover,\n &:focus-visible {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary);\n }\n\n &:active {\n background-color: var(--page-paper-main);\n box-shadow: var(--shadow-tertiary-hover);\n }\n `}\n\n ${(props) =>\n props.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\n width: 40px;\n `}\n `}\n\n ${(props) =>\n (props.variant === \"primary\" ||\n props.variant === \"contained\" ||\n props.variant === \"secondary\" ||\n props.variant === \"outlined\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n `}\n\n ${(props) =>\n (props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\" ||\n props.variant === \"dark transparent\") &&\n css`\n .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,OAAO,IAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAM;EAAA;EAAA;AAAA,0jBACrCH,SAAS,EACTC,cAAc,EAqCd,UAACG,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,IACtBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,IACpBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,SAAS,IAAIF,KAAK,CAACE,OAAO,KAAK,WAAW,KAC7DP,GAAG,yVAgBF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,WAAW,IAAIF,KAAK,CAACE,OAAO,KAAK,UAAU,KAC9DP,GAAG,iWAkBF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,OAAO,KAAK,kBAAkB,IACpCP,GAAG,kNAcF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,UAAU,IAAIF,KAAK,CAACE,OAAO,KAAK,cAAc,KACjEP,GAAG,gOAcF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,QAAQ,IAAIF,KAAK,CAACE,OAAO,KAAK,WAAW,KAC5DP,GAAG,wRAgBF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,OAAO,KAAK,eAAe,IACjCP,GAAG,8SAgBF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACG,QAAQ,IACdR,GAAG,wGAOC,CAACK,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,KACjDN,GAAG,yCAEF,EAECK,KAAK,CAACC,IAAI,KAAK,OAAO,IACxBN,GAAG,iBAEF,EAECK,KAAK,CAACC,IAAI,KAAK,KAAK,IACtBN,GAAG,iBAEF,CACF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,SAAS,IAC1BF,KAAK,CAACE,OAAO,KAAK,WAAW,IAC7BF,KAAK,CAACE,OAAO,KAAK,WAAW,IAC7BF,KAAK,CAACE,OAAO,KAAK,UAAU,KAC9BP,GAAG,mIAQC,CAACK,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,KACjDN,GAAG,yCAEF,CACF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,UAAU,IAC3BF,KAAK,CAACE,OAAO,KAAK,cAAc,IAChCF,KAAK,CAACE,OAAO,KAAK,QAAQ,IAC1BF,KAAK,CAACE,OAAO,KAAK,WAAW,IAC7BF,KAAK,CAACE,OAAO,KAAK,kBAAkB,KACtCP,GAAG,wIAOCK,KAAK,CAACC,IAAI,KAAK,OAAO,IACxBN,GAAG,mCAEF,EACCK,KAAK,CAACC,IAAI,KAAK,KAAK,IACtBN,GAAG,mCAEF,CACF;AAAA,EACJ;AAEDG,YAAY,CAACM,WAAW,GAAG,cAAc;AAEzC,OAAO,IAAMC,oBAAoB,GAAGX,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,wCAG9C;AAEDD,oBAAoB,CAACD,WAAW,GAAG,sBAAsB;AAEzD,OAAO,IAAMG,mBAAmB,GAAGb,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,8CAK7C;AAEDC,mBAAmB,CAACH,WAAW,GAAG,qBAAqB"}
|
|
@@ -9,6 +9,7 @@ export interface IConfirmDialog {
|
|
|
9
9
|
confirmBtnText?: string;
|
|
10
10
|
cancelBtnText?: string;
|
|
11
11
|
shouldShowCancelButton?: boolean;
|
|
12
|
+
isLoading?: boolean;
|
|
12
13
|
}
|
|
13
14
|
export declare const ConfirmDialog: React.ForwardRefExoticComponent<IConfirmDialog & React.RefAttributes<HTMLDivElement>>;
|
|
14
15
|
//# sourceMappingURL=ConfirmDialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAY1C,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAY1C,MAAM,WAAW,cAAc;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,uFAwDzB,CAAC"}
|
|
@@ -18,12 +18,15 @@ export var ConfirmDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
18
18
|
_ref$cancelBtnText = _ref.cancelBtnText,
|
|
19
19
|
cancelBtnText = _ref$cancelBtnText === void 0 ? "Cancel" : _ref$cancelBtnText,
|
|
20
20
|
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
|
|
21
|
-
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel
|
|
21
|
+
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
|
|
22
|
+
_ref$isLoading = _ref.isLoading,
|
|
23
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
|
|
22
24
|
return /*#__PURE__*/React.createElement(Dialog, {
|
|
23
25
|
ref: ref,
|
|
24
26
|
open: open,
|
|
25
27
|
onClose: onCancel,
|
|
26
|
-
className: classnames("c-confirm-dialog", className)
|
|
28
|
+
className: classnames("c-confirm-dialog", className),
|
|
29
|
+
disableCloseOnEsc: isLoading
|
|
27
30
|
}, /*#__PURE__*/React.createElement(DialogTitle, null, dialogTitle), /*#__PURE__*/React.createElement(DialogContentDivider, null), /*#__PURE__*/React.createElement(DialogContent, null, /*#__PURE__*/React.createElement(Body2, {
|
|
28
31
|
lineHeight: "loose",
|
|
29
32
|
color: "secondary",
|
|
@@ -33,12 +36,14 @@ export var ConfirmDialog = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
33
36
|
style: {
|
|
34
37
|
marginRight: "12px"
|
|
35
38
|
},
|
|
36
|
-
onClick: onConfirm
|
|
39
|
+
onClick: onConfirm,
|
|
40
|
+
disabled: isLoading
|
|
37
41
|
}, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React.createElement(Button, {
|
|
38
42
|
variant: "secondary",
|
|
39
43
|
"data-action": "cancel",
|
|
40
44
|
onClick: onCancel,
|
|
41
|
-
type: "button"
|
|
45
|
+
type: "button",
|
|
46
|
+
disabled: isLoading
|
|
42
47
|
}, cancelBtnText) : null));
|
|
43
48
|
});
|
|
44
49
|
ConfirmDialog.displayName = "ConfirmDialog";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConfirmDialog.js","names":["React","forwardRef","classnames","Dialog","DialogTitle","DialogContent","DialogActions","DialogContentDivider","Button","Body2","ConfirmDialog","ref","open","onCancel","onConfirm","className","dialogTitle","dialogContent","confirmBtnText","cancelBtnText","shouldShowCancelButton","marginRight","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport {\n Dialog,\n DialogTitle,\n DialogContent,\n DialogActions,\n DialogContentDivider,\n} from \"../Dialog\";\nimport { Button } from \"../Button/Button\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface IConfirmDialog {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, IConfirmDialog>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n },\n ref\n ) => {\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n >\n <DialogTitle>{dialogTitle}</DialogTitle>\n <DialogContentDivider />\n <DialogContent>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </DialogContent>\n <DialogContentDivider />\n <DialogActions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </DialogActions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,aAAa,EACbC,oBAAoB,QACf,WAAW;AAClB,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,KAAK,QAAQ,8BAA8B;
|
|
1
|
+
{"version":3,"file":"ConfirmDialog.js","names":["React","forwardRef","classnames","Dialog","DialogTitle","DialogContent","DialogActions","DialogContentDivider","Button","Body2","ConfirmDialog","ref","open","onCancel","onConfirm","className","dialogTitle","dialogContent","confirmBtnText","cancelBtnText","shouldShowCancelButton","isLoading","marginRight","displayName"],"sources":["../../../../src/components/ConfirmDialog/ConfirmDialog.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\";\nimport classnames from \"classnames\";\nimport {\n Dialog,\n DialogTitle,\n DialogContent,\n DialogActions,\n DialogContentDivider,\n} from \"../Dialog\";\nimport { Button } from \"../Button/Button\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\n\nexport interface IConfirmDialog {\n open?: boolean;\n onCancel?: () => void;\n onConfirm?: () => void;\n className?: string;\n dialogTitle?: string;\n dialogContent?: string;\n confirmBtnText?: string;\n cancelBtnText?: string;\n shouldShowCancelButton?: boolean;\n isLoading?: boolean;\n}\n\nexport const ConfirmDialog = forwardRef<HTMLDivElement, IConfirmDialog>(\n (\n {\n open = false,\n onCancel,\n onConfirm,\n className,\n dialogTitle = \"Discard changes?\",\n dialogContent = \"All unsaved changes will be lost.\",\n confirmBtnText = \"OK\",\n cancelBtnText = \"Cancel\",\n shouldShowCancelButton = true,\n isLoading = false,\n },\n ref\n ) => {\n return (\n <Dialog\n ref={ref}\n open={open}\n onClose={onCancel}\n className={classnames(\"c-confirm-dialog\", className)}\n disableCloseOnEsc={isLoading}\n >\n <DialogTitle>{dialogTitle}</DialogTitle>\n <DialogContentDivider />\n <DialogContent>\n <Body2 lineHeight=\"loose\" color=\"secondary\" whitespace=\"pre-line\">\n {dialogContent}\n </Body2>\n </DialogContent>\n <DialogContentDivider />\n <DialogActions>\n <Button\n variant=\"primary\"\n style={{ marginRight: \"12px\" }}\n onClick={onConfirm}\n disabled={isLoading}\n >\n {confirmBtnText}\n </Button>\n {shouldShowCancelButton ? (\n <Button\n variant=\"secondary\"\n data-action=\"cancel\"\n onClick={onCancel}\n type=\"button\"\n disabled={isLoading}\n >\n {cancelBtnText}\n </Button>\n ) : null}\n </DialogActions>\n </Dialog>\n );\n }\n);\n\nConfirmDialog.displayName = \"ConfirmDialog\";\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,UAAU,MAAM,YAAY;AACnC,SACEC,MAAM,EACNC,WAAW,EACXC,aAAa,EACbC,aAAa,EACbC,oBAAoB,QACf,WAAW;AAClB,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,KAAK,QAAQ,8BAA8B;AAepD,OAAO,IAAMC,aAAa,gBAAGT,UAAU,CACrC,gBAaEU,GAAG,EACA;EAAA,qBAZDC,IAAI;IAAJA,IAAI,0BAAG,KAAK;IACZC,QAAQ,QAARA,QAAQ;IACRC,SAAS,QAATA,SAAS;IACTC,SAAS,QAATA,SAAS;IAAA,wBACTC,WAAW;IAAXA,WAAW,iCAAG,kBAAkB;IAAA,0BAChCC,aAAa;IAAbA,aAAa,mCAAG,mCAAmC;IAAA,2BACnDC,cAAc;IAAdA,cAAc,oCAAG,IAAI;IAAA,0BACrBC,aAAa;IAAbA,aAAa,mCAAG,QAAQ;IAAA,6BACxBC,sBAAsB;IAAtBA,sBAAsB,sCAAG,IAAI;IAAA,sBAC7BC,SAAS;IAATA,SAAS,+BAAG,KAAK;EAInB,oBACE,oBAAC,MAAM;IACL,GAAG,EAAEV,GAAI;IACT,IAAI,EAAEC,IAAK;IACX,OAAO,EAAEC,QAAS;IAClB,SAAS,EAAEX,UAAU,CAAC,kBAAkB,EAAEa,SAAS,CAAE;IACrD,iBAAiB,EAAEM;EAAU,gBAE7B,oBAAC,WAAW,QAAEL,WAAW,CAAe,eACxC,oBAAC,oBAAoB,OAAG,eACxB,oBAAC,aAAa,qBACZ,oBAAC,KAAK;IAAC,UAAU,EAAC,OAAO;IAAC,KAAK,EAAC,WAAW;IAAC,UAAU,EAAC;EAAU,GAC9DC,aAAa,CACR,CACM,eAChB,oBAAC,oBAAoB,OAAG,eACxB,oBAAC,aAAa,qBACZ,oBAAC,MAAM;IACL,OAAO,EAAC,SAAS;IACjB,KAAK,EAAE;MAAEK,WAAW,EAAE;IAAO,CAAE;IAC/B,OAAO,EAAER,SAAU;IACnB,QAAQ,EAAEO;EAAU,GAEnBH,cAAc,CACR,EACRE,sBAAsB,gBACrB,oBAAC,MAAM;IACL,OAAO,EAAC,WAAW;IACnB,eAAY,QAAQ;IACpB,OAAO,EAAEP,QAAS;IAClB,IAAI,EAAC,QAAQ;IACb,QAAQ,EAAEQ;EAAU,GAEnBF,aAAa,CACP,GACP,IAAI,CACM,CACT;AAEb,CAAC,CACF;AAEDT,aAAa,CAACa,WAAW,GAAG,eAAe"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAOA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0NAsB/B,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAOA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0NAsB/B,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,oMAWpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAgBpC,CAAC"}
|
|
@@ -27,7 +27,7 @@ StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
|
27
27
|
export var StyledCounterButtonReset = styled(Button).withConfig({
|
|
28
28
|
displayName: "Styles__StyledCounterButtonReset",
|
|
29
29
|
componentId: "sc-1ecrcba-3"
|
|
30
|
-
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
30
|
+
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
31
31
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
32
32
|
export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
33
33
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,KAAK,QAAQ,8BAA8B;AACpD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAOxC,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXF,SAAS,EACTD,cAAc,CAEjB;AAEDE,0BAA0B,CAACE,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMC,mBAAmB,GAAGT,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACO,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbV,GAAG,gGAUF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfX,GAAG,uGAIF;AAAA,EACJ;AAEDQ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMK,0BAA0B,GAAGb,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAEDM,0BAA0B,CAACL,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMM,wBAAwB,GAAGd,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,+
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,KAAK,QAAQ,8BAA8B;AACpD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAOxC,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXF,SAAS,EACTD,cAAc,CAEjB;AAEDE,0BAA0B,CAACE,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMC,mBAAmB,GAAGT,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACO,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbV,GAAG,gGAUF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfX,GAAG,uGAIF;AAAA,EACJ;AAEDQ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMK,0BAA0B,GAAGb,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAEDM,0BAA0B,CAACL,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMM,wBAAwB,GAAGd,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAEDW,wBAAwB,CAACN,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMO,wBAAwB,GAAGf,MAAM,CAACE,KAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BO,mBAAmB,EACjB,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,IACdV,GAAG,mCAEF;AAAA,GAGH,UAACS,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbV,GAAG,iCAEF;AAAA,EACJ;AAEDc,wBAAwB,CAACP,WAAW,GAAG,0BAA0B"}
|
package/dist/index.js
CHANGED
|
@@ -237,17 +237,17 @@
|
|
|
237
237
|
}, function (props) {
|
|
238
238
|
return props.size === "big" && styled.css(["height:40px;"]);
|
|
239
239
|
}, function (props) {
|
|
240
|
-
return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
240
|
+
return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
241
241
|
}, function (props) {
|
|
242
|
-
return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
242
|
+
return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
243
243
|
}, function (props) {
|
|
244
|
-
return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
244
|
+
return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
245
245
|
}, function (props) {
|
|
246
|
-
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
246
|
+
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
247
247
|
}, function (props) {
|
|
248
|
-
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
248
|
+
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
249
249
|
}, function (props) {
|
|
250
|
-
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
250
|
+
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
251
251
|
}, function (props) {
|
|
252
252
|
return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
|
|
253
253
|
}, function (props) {
|
|
@@ -4192,7 +4192,7 @@
|
|
|
4192
4192
|
var StyledCounterButtonReset = styled__default["default"](Button).withConfig({
|
|
4193
4193
|
displayName: "Styles__StyledCounterButtonReset",
|
|
4194
4194
|
componentId: "sc-1ecrcba-3"
|
|
4195
|
-
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
4195
|
+
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
4196
4196
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
4197
4197
|
var StyledCounterButtonLabel = styled__default["default"](Body2).withConfig({
|
|
4198
4198
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
@@ -9271,12 +9271,15 @@
|
|
|
9271
9271
|
_ref$cancelBtnText = _ref.cancelBtnText,
|
|
9272
9272
|
cancelBtnText = _ref$cancelBtnText === void 0 ? "Cancel" : _ref$cancelBtnText,
|
|
9273
9273
|
_ref$shouldShowCancel = _ref.shouldShowCancelButton,
|
|
9274
|
-
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel
|
|
9274
|
+
shouldShowCancelButton = _ref$shouldShowCancel === void 0 ? true : _ref$shouldShowCancel,
|
|
9275
|
+
_ref$isLoading = _ref.isLoading,
|
|
9276
|
+
isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
|
|
9275
9277
|
return /*#__PURE__*/React__default["default"].createElement(Dialog, {
|
|
9276
9278
|
ref: ref,
|
|
9277
9279
|
open: open,
|
|
9278
9280
|
onClose: onCancel,
|
|
9279
|
-
className: classNames__default["default"]("c-confirm-dialog", className)
|
|
9281
|
+
className: classNames__default["default"]("c-confirm-dialog", className),
|
|
9282
|
+
disableCloseOnEsc: isLoading
|
|
9280
9283
|
}, /*#__PURE__*/React__default["default"].createElement(DialogTitle, null, dialogTitle), /*#__PURE__*/React__default["default"].createElement(DialogContentDivider, null), /*#__PURE__*/React__default["default"].createElement(DialogContent, null, /*#__PURE__*/React__default["default"].createElement(Body2, {
|
|
9281
9284
|
lineHeight: "loose",
|
|
9282
9285
|
color: "secondary",
|
|
@@ -9286,12 +9289,14 @@
|
|
|
9286
9289
|
style: {
|
|
9287
9290
|
marginRight: "12px"
|
|
9288
9291
|
},
|
|
9289
|
-
onClick: onConfirm
|
|
9292
|
+
onClick: onConfirm,
|
|
9293
|
+
disabled: isLoading
|
|
9290
9294
|
}, confirmBtnText), shouldShowCancelButton ? /*#__PURE__*/React__default["default"].createElement(Button, {
|
|
9291
9295
|
variant: "secondary",
|
|
9292
9296
|
"data-action": "cancel",
|
|
9293
9297
|
onClick: onCancel,
|
|
9294
|
-
type: "button"
|
|
9298
|
+
type: "button",
|
|
9299
|
+
disabled: isLoading
|
|
9295
9300
|
}, cancelBtnText) : null));
|
|
9296
9301
|
});
|
|
9297
9302
|
ConfirmDialog.displayName = "ConfirmDialog";
|