@egov3/system-design 1.3.88 → 1.3.90
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/baseComponents/SelectBoxButton/SelectBoxButton.module.css.js +2 -2
- package/dist/cjs/baseComponents/SelectBoxButton/index.js +2 -1
- package/dist/cjs/baseComponents/SelectBoxButton/index.js.map +1 -1
- package/dist/esm/baseComponents/SelectBoxButton/SelectBoxButton.module.css.js +2 -2
- package/dist/esm/baseComponents/SelectBoxButton/index.js +2 -1
- package/dist/esm/baseComponents/SelectBoxButton/index.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var css_248z = ".SelectBoxButton-module_selectContainer__OZKcY {\n display: flex;\n height: 56px;\n padding: 8px 16px;\n align-items: center;\n gap: 12px;\n align-self: stretch;\n border-radius: 12px;\n background: var(--surface-surface-1);\n}\n\n.SelectBoxButton-module_labelWrapper__qziDR {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 2px;\n flex: 1 0 0;\n}\n\n.SelectBoxButton-module_chevronIcon__c3YkY {\n width: 20px;\n height: 20px;\n}\n\n.SelectBoxButton-module_errorLabel__tvOEX {\n color: var(--text-error);\n}\n\n.SelectBoxButton-module_label__QXEFa {\n color: var(--text-secondary);\n}\n\n.SelectBoxButton-module_selectText__bHp-v {\n overflow: hidden;\n text-overflow: ellipsis;\n
|
|
6
|
-
var styles = {"selectContainer":"SelectBoxButton-module_selectContainer__OZKcY","labelWrapper":"SelectBoxButton-module_labelWrapper__qziDR","chevronIcon":"SelectBoxButton-module_chevronIcon__c3YkY","errorLabel":"SelectBoxButton-module_errorLabel__tvOEX","label":"SelectBoxButton-module_label__QXEFa","selectText":"SelectBoxButton-module_selectText__bHp-v"};
|
|
5
|
+
var css_248z = ".SelectBoxButton-module_selectContainer__OZKcY {\n display: flex;\n height: 56px;\n padding: 8px 16px;\n align-items: center;\n gap: 12px;\n align-self: stretch;\n border-radius: 12px;\n background: var(--surface-surface-1);\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.SelectBoxButton-module_labelWrapper__qziDR {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 2px;\n flex: 1 0 0;\n min-width: 0;\n}\n\n.SelectBoxButton-module_chevronIcon__c3YkY {\n width: 20px;\n height: 20px;\n}\n\n.SelectBoxButton-module_errorLabel__tvOEX {\n color: var(--text-error);\n}\n\n.SelectBoxButton-module_label__QXEFa {\n color: var(--text-secondary);\n}\n\n.SelectBoxButton-module_selectText__bHp-v {\n color: var(--text-primary);\n}\n\n.SelectBoxButton-module_textOverflow__bAJad {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n text-align: start;\n}\n";
|
|
6
|
+
var styles = {"selectContainer":"SelectBoxButton-module_selectContainer__OZKcY","labelWrapper":"SelectBoxButton-module_labelWrapper__qziDR","chevronIcon":"SelectBoxButton-module_chevronIcon__c3YkY","errorLabel":"SelectBoxButton-module_errorLabel__tvOEX","label":"SelectBoxButton-module_label__QXEFa","selectText":"SelectBoxButton-module_selectText__bHp-v","textOverflow":"SelectBoxButton-module_textOverflow__bAJad"};
|
|
7
7
|
function styleInject(css, options) {
|
|
8
8
|
if (typeof document === 'undefined') return;
|
|
9
9
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -4,13 +4,14 @@ var tslib = require('tslib');
|
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var graphics = require('@egov3/graphics');
|
|
6
6
|
var index$1 = require('../../constants/i18n/index.js');
|
|
7
|
+
var joinClasses = require('../../utils/joinClasses.js');
|
|
7
8
|
var index = require('../Typography/index.js');
|
|
8
9
|
var SelectBoxButton_module = require('./SelectBoxButton.module.css.js');
|
|
9
10
|
|
|
10
11
|
var SelectBoxButton = function (_a) {
|
|
11
12
|
var handleClick = _a.handleClick, labelText = _a.labelText, disabled = _a.disabled, error = _a.error, modalValue = _a.modalValue, lang = _a.lang;
|
|
12
13
|
var hasValue = modalValue && modalValue.length > 0;
|
|
13
|
-
return (jsxRuntime.jsxs("button", tslib.__assign({ type: "button", "data-testid": "SelectBoxModal_BUTTON", className: SelectBoxButton_module.default.selectContainer, disabled: disabled, onClick: handleClick }, { children: [jsxRuntime.jsxs("div", tslib.__assign({ "data-testid": "SelectBoxModal_TITLE", className: SelectBoxButton_module.default.labelWrapper }, { children: [jsxRuntime.jsx(index.Typography, tslib.__assign({ tag: "label", fontClass: hasValue ? "caption1Regular" : "body2Regular", "data-testid": "SelectBoxModal_LABEL", className: error ? SelectBoxButton_module.default.errorLabel : SelectBoxButton_module.default.label, "aria-label": labelText }, { children: labelText })), hasValue && (jsxRuntime.jsx(index.Typography, tslib.__assign({ tag: "span", fontClass: "body2Regular", "data-testid": "SelectBoxModal_VALUE", className: SelectBoxButton_module.default.selectText, "aria-label": modalValue }, { children: modalValue })))] })), jsxRuntime.jsx(graphics.Icons.Basic.ChevronDownSmall, { "aria-label": index$1.i18n.SelectBoxButton.AriaExpandButton[lang], className: SelectBoxButton_module.default.chevronIcon, fill: "var(--icon-secondary-color)", "data-testid": "SelectBoxModal_CHEVRON_ICON" })] })));
|
|
14
|
+
return (jsxRuntime.jsxs("button", tslib.__assign({ type: "button", "data-testid": "SelectBoxModal_BUTTON", className: SelectBoxButton_module.default.selectContainer, disabled: disabled, onClick: handleClick }, { children: [jsxRuntime.jsxs("div", tslib.__assign({ "data-testid": "SelectBoxModal_TITLE", className: SelectBoxButton_module.default.labelWrapper }, { children: [jsxRuntime.jsx(index.Typography, tslib.__assign({ tag: "label", fontClass: hasValue ? "caption1Regular" : "body2Regular", "data-testid": "SelectBoxModal_LABEL", className: joinClasses.joinClasses(SelectBoxButton_module.default.textOverflow, error ? SelectBoxButton_module.default.errorLabel : SelectBoxButton_module.default.label), "aria-label": labelText }, { children: labelText })), hasValue && (jsxRuntime.jsx(index.Typography, tslib.__assign({ tag: "span", fontClass: "body2Regular", "data-testid": "SelectBoxModal_VALUE", className: joinClasses.joinClasses(SelectBoxButton_module.default.selectText, SelectBoxButton_module.default.textOverflow), "aria-label": modalValue }, { children: modalValue })))] })), jsxRuntime.jsx(graphics.Icons.Basic.ChevronDownSmall, { "aria-label": index$1.i18n.SelectBoxButton.AriaExpandButton[lang], className: SelectBoxButton_module.default.chevronIcon, fill: "var(--icon-secondary-color)", "data-testid": "SelectBoxModal_CHEVRON_ICON" })] })));
|
|
14
15
|
};
|
|
15
16
|
|
|
16
17
|
exports.SelectBoxButton = SelectBoxButton;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SelectBoxButton/index.tsx"],"sourcesContent":[null],"names":["_jsxs","__assign","styles","_jsx","Typography","Icons","i18n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SelectBoxButton/index.tsx"],"sourcesContent":[null],"names":["_jsxs","__assign","styles","_jsx","Typography","joinClasses","Icons","i18n"],"mappings":";;;;;;;;;;AAgBO,IAAM,eAAe,GAAG,UAAC,EAOd,EAAA;AANhB,IAAA,IAAA,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,WAAA,EACL,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,IAAI,GAAA,EAAA,CAAA,IAAA;IAEJ,IAAM,QAAQ,GAAG,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;AAEpD,IAAA,QACEA,eAAA,CAAA,QAAA,EAAAC,cAAA,CAAA,EACE,IAAI,EAAC,QAAQ,EAAA,aAAA,EACD,uBAAuB,EACnC,SAAS,EAAEC,8BAAM,CAAC,eAAe,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EAAA,EAAA,EAAA,QAAA,EAAA,CAEpBF,uDAAiB,sBAAsB,EAAC,SAAS,EAAEE,8BAAM,CAAC,YAAY,EAAA,EAAA,EAAA,QAAA,EAAA,CACpEC,cAAA,CAACC,gBAAU,EAAAH,cAAA,CAAA,EACT,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,QAAQ,GAAG,iBAAiB,GAAG,cAAc,EAAA,aAAA,EAC5C,sBAAsB,EAClC,SAAS,EAAEI,uBAAW,CACpBH,8BAAM,CAAC,YAAY,EACnB,KAAK,GAAGA,8BAAM,CAAC,UAAU,GAAGA,8BAAM,CAAC,KAAK,CACzC,EAAA,YAAA,EACW,SAAS,EAAA,EAAA,EAAA,QAAA,EAEpB,SAAS,EAAA,CAAA,CACC,EAEZ,QAAQ,KACPC,cAAA,CAACC,gBAAU,EAAAH,cAAA,CAAA,EACT,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,cAAc,EAAA,aAAA,EACZ,sBAAsB,EAClC,SAAS,EAAEI,uBAAW,CAACH,8BAAM,CAAC,UAAU,EAAEA,8BAAM,CAAC,YAAY,CAAC,EAAA,YAAA,EAClD,UAAU,EAAA,EAAA,EAAA,QAAA,EAErB,UAAU,EAAA,CAAA,CACA,CACd,CAAA,EAAA,CAAA,CACG,EACNC,eAACG,cAAK,CAAC,KAAK,CAAC,gBAAgB,EAAA,EAAA,YAAA,EACfC,YAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACvD,SAAS,EAAEL,8BAAM,CAAC,WAAW,EAC7B,IAAI,EAAC,6BAA6B,EAAA,aAAA,EACtB,6BAA6B,EAAA,CACzC,CAAA,EAAA,CAAA,CACK;AAEb;;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
var css_248z = ".SelectBoxButton-module_selectContainer__OZKcY {\n display: flex;\n height: 56px;\n padding: 8px 16px;\n align-items: center;\n gap: 12px;\n align-self: stretch;\n border-radius: 12px;\n background: var(--surface-surface-1);\n}\n\n.SelectBoxButton-module_labelWrapper__qziDR {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 2px;\n flex: 1 0 0;\n}\n\n.SelectBoxButton-module_chevronIcon__c3YkY {\n width: 20px;\n height: 20px;\n}\n\n.SelectBoxButton-module_errorLabel__tvOEX {\n color: var(--text-error);\n}\n\n.SelectBoxButton-module_label__QXEFa {\n color: var(--text-secondary);\n}\n\n.SelectBoxButton-module_selectText__bHp-v {\n overflow: hidden;\n text-overflow: ellipsis;\n
|
|
2
|
-
var styles = {"selectContainer":"SelectBoxButton-module_selectContainer__OZKcY","labelWrapper":"SelectBoxButton-module_labelWrapper__qziDR","chevronIcon":"SelectBoxButton-module_chevronIcon__c3YkY","errorLabel":"SelectBoxButton-module_errorLabel__tvOEX","label":"SelectBoxButton-module_label__QXEFa","selectText":"SelectBoxButton-module_selectText__bHp-v"};
|
|
1
|
+
var css_248z = ".SelectBoxButton-module_selectContainer__OZKcY {\n display: flex;\n height: 56px;\n padding: 8px 16px;\n align-items: center;\n gap: 12px;\n align-self: stretch;\n border-radius: 12px;\n background: var(--surface-surface-1);\n width: 100%;\n max-width: 100%;\n box-sizing: border-box;\n}\n\n.SelectBoxButton-module_labelWrapper__qziDR {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: flex-start;\n gap: 2px;\n flex: 1 0 0;\n min-width: 0;\n}\n\n.SelectBoxButton-module_chevronIcon__c3YkY {\n width: 20px;\n height: 20px;\n}\n\n.SelectBoxButton-module_errorLabel__tvOEX {\n color: var(--text-error);\n}\n\n.SelectBoxButton-module_label__QXEFa {\n color: var(--text-secondary);\n}\n\n.SelectBoxButton-module_selectText__bHp-v {\n color: var(--text-primary);\n}\n\n.SelectBoxButton-module_textOverflow__bAJad {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n text-align: start;\n}\n";
|
|
2
|
+
var styles = {"selectContainer":"SelectBoxButton-module_selectContainer__OZKcY","labelWrapper":"SelectBoxButton-module_labelWrapper__qziDR","chevronIcon":"SelectBoxButton-module_chevronIcon__c3YkY","errorLabel":"SelectBoxButton-module_errorLabel__tvOEX","label":"SelectBoxButton-module_label__QXEFa","selectText":"SelectBoxButton-module_selectText__bHp-v","textOverflow":"SelectBoxButton-module_textOverflow__bAJad"};
|
|
3
3
|
function styleInject(css, options) {
|
|
4
4
|
if (typeof document === 'undefined') return;
|
|
5
5
|
const head = document.head || document.getElementsByTagName('head')[0];
|
|
@@ -2,13 +2,14 @@ import { __assign } from 'tslib';
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { Icons } from '@egov3/graphics';
|
|
4
4
|
import { i18n } from '../../constants/i18n/index.js';
|
|
5
|
+
import { joinClasses } from '../../utils/joinClasses.js';
|
|
5
6
|
import { Typography } from '../Typography/index.js';
|
|
6
7
|
import styles from './SelectBoxButton.module.css.js';
|
|
7
8
|
|
|
8
9
|
var SelectBoxButton = function (_a) {
|
|
9
10
|
var handleClick = _a.handleClick, labelText = _a.labelText, disabled = _a.disabled, error = _a.error, modalValue = _a.modalValue, lang = _a.lang;
|
|
10
11
|
var hasValue = modalValue && modalValue.length > 0;
|
|
11
|
-
return (jsxs("button", __assign({ type: "button", "data-testid": "SelectBoxModal_BUTTON", className: styles.selectContainer, disabled: disabled, onClick: handleClick }, { children: [jsxs("div", __assign({ "data-testid": "SelectBoxModal_TITLE", className: styles.labelWrapper }, { children: [jsx(Typography, __assign({ tag: "label", fontClass: hasValue ? "caption1Regular" : "body2Regular", "data-testid": "SelectBoxModal_LABEL", className: error ? styles.errorLabel : styles.label, "aria-label": labelText }, { children: labelText })), hasValue && (jsx(Typography, __assign({ tag: "span", fontClass: "body2Regular", "data-testid": "SelectBoxModal_VALUE", className: styles.selectText, "aria-label": modalValue }, { children: modalValue })))] })), jsx(Icons.Basic.ChevronDownSmall, { "aria-label": i18n.SelectBoxButton.AriaExpandButton[lang], className: styles.chevronIcon, fill: "var(--icon-secondary-color)", "data-testid": "SelectBoxModal_CHEVRON_ICON" })] })));
|
|
12
|
+
return (jsxs("button", __assign({ type: "button", "data-testid": "SelectBoxModal_BUTTON", className: styles.selectContainer, disabled: disabled, onClick: handleClick }, { children: [jsxs("div", __assign({ "data-testid": "SelectBoxModal_TITLE", className: styles.labelWrapper }, { children: [jsx(Typography, __assign({ tag: "label", fontClass: hasValue ? "caption1Regular" : "body2Regular", "data-testid": "SelectBoxModal_LABEL", className: joinClasses(styles.textOverflow, error ? styles.errorLabel : styles.label), "aria-label": labelText }, { children: labelText })), hasValue && (jsx(Typography, __assign({ tag: "span", fontClass: "body2Regular", "data-testid": "SelectBoxModal_VALUE", className: joinClasses(styles.selectText, styles.textOverflow), "aria-label": modalValue }, { children: modalValue })))] })), jsx(Icons.Basic.ChevronDownSmall, { "aria-label": i18n.SelectBoxButton.AriaExpandButton[lang], className: styles.chevronIcon, fill: "var(--icon-secondary-color)", "data-testid": "SelectBoxModal_CHEVRON_ICON" })] })));
|
|
12
13
|
};
|
|
13
14
|
|
|
14
15
|
export { SelectBoxButton };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SelectBoxButton/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/SelectBoxButton/index.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;;AAgBO,IAAM,eAAe,GAAG,UAAC,EAOd,EAAA;AANhB,IAAA,IAAA,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,SAAS,GAAA,EAAA,CAAA,SAAA,EACT,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,KAAK,WAAA,EACL,UAAU,GAAA,EAAA,CAAA,UAAA,EACV,IAAI,GAAA,EAAA,CAAA,IAAA;IAEJ,IAAM,QAAQ,GAAG,UAAU,IAAI,UAAU,CAAC,MAAM,GAAG,CAAC;AAEpD,IAAA,QACEA,IAAA,CAAA,QAAA,EAAA,QAAA,CAAA,EACE,IAAI,EAAC,QAAQ,EAAA,aAAA,EACD,uBAAuB,EACnC,SAAS,EAAE,MAAM,CAAC,eAAe,EACjC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,EAAA,EAAA,EAAA,QAAA,EAAA,CAEpBA,sCAAiB,sBAAsB,EAAC,SAAS,EAAE,MAAM,CAAC,YAAY,EAAA,EAAA,EAAA,QAAA,EAAA,CACpEC,GAAA,CAAC,UAAU,EAAA,QAAA,CAAA,EACT,GAAG,EAAC,OAAO,EACX,SAAS,EAAE,QAAQ,GAAG,iBAAiB,GAAG,cAAc,EAAA,aAAA,EAC5C,sBAAsB,EAClC,SAAS,EAAE,WAAW,CACpB,MAAM,CAAC,YAAY,EACnB,KAAK,GAAG,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,KAAK,CACzC,EAAA,YAAA,EACW,SAAS,EAAA,EAAA,EAAA,QAAA,EAEpB,SAAS,EAAA,CAAA,CACC,EAEZ,QAAQ,KACPA,GAAA,CAAC,UAAU,EAAA,QAAA,CAAA,EACT,GAAG,EAAC,MAAM,EACV,SAAS,EAAC,cAAc,EAAA,aAAA,EACZ,sBAAsB,EAClC,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,YAAY,CAAC,EAAA,YAAA,EAClD,UAAU,EAAA,EAAA,EAAA,QAAA,EAErB,UAAU,EAAA,CAAA,CACA,CACd,CAAA,EAAA,CAAA,CACG,EACNA,IAAC,KAAK,CAAC,KAAK,CAAC,gBAAgB,EAAA,EAAA,YAAA,EACf,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,IAAI,CAAC,EACvD,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,IAAI,EAAC,6BAA6B,EAAA,aAAA,EACtB,6BAA6B,EAAA,CACzC,CAAA,EAAA,CAAA,CACK;AAEb;;;;"}
|