esewa-ui-library 1.0.6 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -9
- package/dist/components/AlertCard/eSewaAlertCard.d.ts +3 -3
- package/dist/components/AppBar/eSewaAppbar.d.ts +2 -2
- package/dist/components/Button/eSewaButton.d.ts +1 -1
- package/dist/components/Chip/eSewaChipGroup.d.ts +1 -1
- package/dist/components/Dialog/eSewaDialog.d.ts +2 -2
- package/dist/components/Icon/esIcon.d.ts +1 -0
- package/dist/components/Tag/eSewaTag.d.ts +1 -1
- package/dist/index.js +37 -25
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +37 -25
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -60,9 +60,11 @@ var ESewaButton = function ESewaButton(_ref) {
|
|
|
60
60
|
disabled: disabled
|
|
61
61
|
}, React__default.createElement("div", {
|
|
62
62
|
className: "flex " + (iconPlacement === 'start' ? 'flex-row' : 'flex-reverse')
|
|
63
|
-
}, icon && React__default.createElement("i", {
|
|
63
|
+
}, icon && (typeof icon === 'string' ? React__default.createElement("i", {
|
|
64
64
|
className: icon
|
|
65
|
-
}, " ")
|
|
65
|
+
}, " ") : {
|
|
66
|
+
icon: icon
|
|
67
|
+
}), iconClass && React__default.createElement("span", {
|
|
66
68
|
className: iconClass
|
|
67
69
|
}), React__default.createElement("span", null, " ", children))));
|
|
68
70
|
};
|
|
@@ -105,22 +107,22 @@ var ESewaAlertCard = function ESewaAlertCard(_ref) {
|
|
|
105
107
|
className: 'alert-card--header'
|
|
106
108
|
}, titleIcon && React__default.createElement("span", {
|
|
107
109
|
className: 'alert-card--header--icon'
|
|
108
|
-
}, React__default.createElement("i", {
|
|
110
|
+
}, typeof titleIcon === 'string' ? React__default.createElement("i", {
|
|
109
111
|
className: titleIcon
|
|
110
|
-
})), title && React__default.createElement("h3", {
|
|
112
|
+
}) : titleIcon), title && React__default.createElement("h3", {
|
|
111
113
|
className: 'alert-card--header--title body1'
|
|
112
114
|
}, title), showDismissIcon && React__default.createElement("span", {
|
|
113
115
|
className: 'alert-card--header--dismiss-icon',
|
|
114
116
|
onClick: onDismiss
|
|
115
|
-
}, React__default.createElement("i", {
|
|
117
|
+
}, typeof dismissIcon === 'string' ? React__default.createElement("i", {
|
|
116
118
|
className: dismissIcon
|
|
117
|
-
}))), React__default.createElement("div", {
|
|
119
|
+
}) : dismissIcon)), React__default.createElement("div", {
|
|
118
120
|
className: 'alert-card--description'
|
|
119
121
|
}, showDescriptionIcon && React__default.createElement("span", {
|
|
120
122
|
className: 'alert-card--description--icon'
|
|
121
|
-
}, React__default.createElement("i", {
|
|
123
|
+
}, typeof descriptionIcon === 'string' ? React__default.createElement("i", {
|
|
122
124
|
className: descriptionIcon
|
|
123
|
-
})), description && React__default.createElement("p", {
|
|
125
|
+
}) : descriptionIcon), description && React__default.createElement("p", {
|
|
124
126
|
className: 'card-text body2'
|
|
125
127
|
}, description)), showCardFooter && React__default.createElement("div", {
|
|
126
128
|
className: 'alert-card--footer'
|
|
@@ -183,7 +185,7 @@ var StyledAppBar = styled.header.attrs(function (_ref) {
|
|
|
183
185
|
return {
|
|
184
186
|
titleposition: titleposition
|
|
185
187
|
};
|
|
186
|
-
})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n\n .e-app-bar {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n background-color: var(--appbar-bg-top);\n padding: 7px 12px;\n position: relative;\n height: 42px;\n
|
|
188
|
+
})(_templateObject$3 || (_templateObject$3 = _taggedTemplateLiteralLoose(["\n width: 100%;\n\n .e-app-bar {\n display: flex;\n justify-content: space-between;\n flex-direction: row;\n align-items: center;\n background-color: var(--appbar-bg-top);\n padding: 7px 12px;\n position: relative;\n height: 42px;\n gap: var(--values-value-8);\n\n &--nav-icon,\n &--close-icon {\n padding: 7px;\n color: var(--white);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n /* Title section */\n &--title-wrapper {\n display: flex;\n justify-content: ", ";\n align-items: center;\n width: 100%; // Ensures the title section takes full width to apply the alignment\n }\n\n &--title {\n display: flex;\n align-items: center;\n gap: 12px;\n overflow: hidden;\n }\n\n &--title-image img {\n width: 32px;\n object-fit: cover;\n background: var(--white);\n border: 1px solid var(--border);\n border-radius: var(--grid-borderradius-border-radius-xs);\n }\n\n &--title-label {\n color: var(--white);\n letter-spacing: 0.4px;\n font-size: var(--values-value-16);\n font-weight: 500;\n }\n }\n"])), function (props) {
|
|
187
189
|
return props.titleposition === 'left' ? 'flex-start' : props.titleposition === 'right' ? 'flex-end' : 'center';
|
|
188
190
|
});
|
|
189
191
|
var ESewaAppBar = function ESewaAppBar(_ref2) {
|
|
@@ -227,10 +229,10 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
|
|
|
227
229
|
}, React__default.createElement("path", {
|
|
228
230
|
d: 'M15.4218 4.31438C15.8357 4.73135 15.8332 5.4049 15.4162 5.81879L7.64512 13.5324H22.9362C23.5237 13.5324 24 13.9801 24 14.5324C24 15.0847 23.5237 15.5324 22.9362 15.5324H7.76404L15.3644 22.1335C15.8079 22.5187 15.8552 23.1906 15.47 23.6342C15.0847 24.0777 14.4128 24.125 13.9693 23.7398L4.36625 15.3993C4.17619 15.2343 4.05889 15.0166 4.01719 14.7868C3.95669 14.4536 4.0559 14.0973 4.31438 13.8407L13.9174 4.30879C14.3344 3.8949 15.0079 3.8974 15.4218 4.31438Z',
|
|
229
231
|
fill: '#fff'
|
|
230
|
-
})), icon
|
|
232
|
+
})), typeof icon === 'string' ? React__default.createElement("span", {
|
|
231
233
|
className: icon
|
|
232
|
-
})), React__default.createElement("div", {
|
|
233
|
-
className:
|
|
234
|
+
}) : icon), React__default.createElement("div", {
|
|
235
|
+
className: 'e-app-bar--title-wrapper'
|
|
234
236
|
}, React__default.createElement("div", {
|
|
235
237
|
className: 'e-app-bar--title',
|
|
236
238
|
onClick: onTitleClick
|
|
@@ -244,9 +246,9 @@ var ESewaAppBar = function ESewaAppBar(_ref2) {
|
|
|
244
246
|
}, titleText))), actionIcon && React__default.createElement("div", {
|
|
245
247
|
className: 'e-app-bar--close-icon',
|
|
246
248
|
onClick: onActionIconClick
|
|
247
|
-
}, React__default.createElement("span", {
|
|
249
|
+
}, typeof actionIcon === 'string' ? React__default.createElement("span", {
|
|
248
250
|
className: actionIcon
|
|
249
|
-
}))));
|
|
251
|
+
}) : actionIcon)));
|
|
250
252
|
};
|
|
251
253
|
|
|
252
254
|
var _templateObject$4;
|
|
@@ -391,18 +393,18 @@ var ESewaDialog = function ESewaDialog(_ref) {
|
|
|
391
393
|
className: 'dialog-header'
|
|
392
394
|
}, showLeftIcon && React__default.createElement("div", {
|
|
393
395
|
className: 'dialog-header-left-icon'
|
|
394
|
-
}, React__default.createElement("span", {
|
|
396
|
+
}, typeof leftIcon === 'string' ? React__default.createElement("span", {
|
|
395
397
|
className: leftIcon
|
|
396
|
-
})), title && React__default.createElement("h4", {
|
|
398
|
+
}) : leftIcon), title && React__default.createElement("h4", {
|
|
397
399
|
className: 'dialog-header-title'
|
|
398
400
|
}, title), showCloseIcon && React__default.createElement("div", {
|
|
399
401
|
className: 'dialog-header-close-icon',
|
|
400
402
|
onClick: function onClick() {
|
|
401
403
|
return closeDialog();
|
|
402
404
|
}
|
|
403
|
-
}, React__default.createElement("span", {
|
|
405
|
+
}, typeof closeIcon === 'string' ? React__default.createElement("span", {
|
|
404
406
|
className: closeIcon
|
|
405
|
-
}))), React__default.createElement("div", {
|
|
407
|
+
}) : closeIcon)), React__default.createElement("div", {
|
|
406
408
|
className: 'dialog-body'
|
|
407
409
|
}, React__default.createElement("div", {
|
|
408
410
|
className: 'body2'
|
|
@@ -565,7 +567,7 @@ var ESewaImage = function ESewaImage(_ref2) {
|
|
|
565
567
|
|
|
566
568
|
var _excluded$2 = ["type", "name", "label", "placeholder", "value", "checked", "min", "max", "step", "required", "readOnly", "disabled", "className", "onChange", "validationMessage", "autoFocus"];
|
|
567
569
|
var _templateObject$a;
|
|
568
|
-
var StyledInput = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n .flex-auto {\n flex: 1 1 auto !important;\n }\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: ", ";\n }\n\n input {\n
|
|
570
|
+
var StyledInput = styled.div(_templateObject$a || (_templateObject$a = _taggedTemplateLiteralLoose(["\n .flex-auto {\n flex: 1 1 auto !important;\n }\n .full-width {\n display: flex;\n width: 100%;\n }\n\n label {\n font-style: normal;\n font-weight: 500;\n font-size: 14px;\n line-height: 17px;\n letter-spacing: 0.15px;\n color: ", ";\n }\n\n input {\n width: 100%;\n border-radius: var(--values-value-8); \n padding: var(--values-value-10) var(--values-value-12);\n color: var(--text-dark);\n background: var(--input-bg);\n transition: background-color 0.2s, color 0.2s, border-color 0.2s,\n box-shadow 0.2s;\n appearance: none;\n outline-color: transparent;\n height: 48px;\n border: 1px solid var(--default-input-border);\n box-sizing: border-box;\n\n &::placeholder {\n color: var(--input-placeholder);\n letter-spacing: 0.5px;\n font-weight: 400;\n opacity: 1;\n }\n\n &:focus-visible {\n border: 1px solid var(--default-input-border);\n outline: 1px solid var(--primary);\n }\n &.error {\n border-color: var(--danger-border);\n outline: none;\n }\n\n ::-ms-input-placeholder {\n color: var(--input-placeholder);\n font-weight: 400;\n letter-spacing: 0.5px;\n font-size: 16px;\n line-height: 20px;\n }\n }\n\n .validationMessage {\n color: var(--danger-text);\n }\n"])), function (props) {
|
|
569
571
|
return props.theme['text-dark'];
|
|
570
572
|
});
|
|
571
573
|
var ESewaInputField = forwardRef(function (_ref, ref) {
|
|
@@ -6844,11 +6846,15 @@ var ESewaTag = function ESewaTag(_ref) {
|
|
|
6844
6846
|
onClick: onClick
|
|
6845
6847
|
}, icon && iconPosition === 'start' && React__default.createElement("span", {
|
|
6846
6848
|
className: 'tag__icon'
|
|
6847
|
-
}, icon
|
|
6849
|
+
}, typeof icon === 'string' ? React__default.createElement("span", {
|
|
6850
|
+
className: icon
|
|
6851
|
+
}) : icon), React__default.createElement("span", {
|
|
6848
6852
|
className: 'tag__text'
|
|
6849
6853
|
}, text), icon && iconPosition === 'end' && React__default.createElement("span", {
|
|
6850
6854
|
className: 'tag__icon'
|
|
6851
|
-
}, icon
|
|
6855
|
+
}, typeof icon === 'string' ? React__default.createElement("span", {
|
|
6856
|
+
className: icon
|
|
6857
|
+
}) : icon)));
|
|
6852
6858
|
};
|
|
6853
6859
|
|
|
6854
6860
|
var _templateObject$i;
|
|
@@ -6999,7 +7005,7 @@ var ESewaCarousel = function ESewaCarousel(_ref) {
|
|
|
6999
7005
|
|
|
7000
7006
|
var _templateObject$k, _templateObject2;
|
|
7001
7007
|
var ChipContainer = styled.div(_templateObject$k || (_templateObject$k = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n padding: 8px;\n"])));
|
|
7002
|
-
var Chip = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap:
|
|
7008
|
+
var Chip = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 8px 12px;\n border-radius: 16px;\n cursor: pointer;\n font-size: 14px;\n background-color: ", ";\n color: ", ";\n &.border-radius-0 {\n border-radius: var(--values-value-0);\n }\n &.border-radius-2 {\n border-radius: var(--values-value-2);\n }\n &.border-radius-4 {\n border-radius: var(--values-value-4);\n }\n &.border-radius-8 {\n border-radius: var(--values-value-8);\n }\n &.border-radius-16 {\n border-radius: var(--values-value-16);\n }\n i{\n font-size: var(--values-value-12);\n }\n .chip__icon {\n display: flex;\n align-items: center;\n font-size: var(--values-value-12);\n }\n"])), function (_ref) {
|
|
7003
7009
|
var selected = _ref.selected;
|
|
7004
7010
|
return selected ? 'var(--primary-500)' : 'var(--secondary-bg-light)';
|
|
7005
7011
|
}, function (_ref2) {
|
|
@@ -7033,7 +7039,11 @@ var ESewaChipGroup = function ESewaChipGroup(_ref3) {
|
|
|
7033
7039
|
onClick: function onClick() {
|
|
7034
7040
|
return handleSelectChip(chip.id);
|
|
7035
7041
|
}
|
|
7036
|
-
}, chip.showIcon && chip.icon && React__default.createElement("span",
|
|
7042
|
+
}, chip.showIcon && chip.icon && React__default.createElement("span", {
|
|
7043
|
+
className: "chip__icon"
|
|
7044
|
+
}, typeof chip.icon === 'string' ? React__default.createElement("i", {
|
|
7045
|
+
className: chip.icon
|
|
7046
|
+
}) : chip.icon), chip.text);
|
|
7037
7047
|
}));
|
|
7038
7048
|
};
|
|
7039
7049
|
|
|
@@ -7135,9 +7145,11 @@ var ESIcon = function ESIcon(_ref) {
|
|
|
7135
7145
|
_ref$size = _ref.size,
|
|
7136
7146
|
size = _ref$size === void 0 ? 28 : _ref$size,
|
|
7137
7147
|
iconPrimaryColor = _ref.iconPrimaryColor,
|
|
7138
|
-
iconSecondaryColor = _ref.iconSecondaryColor
|
|
7148
|
+
iconSecondaryColor = _ref.iconSecondaryColor,
|
|
7149
|
+
_ref$className = _ref.className,
|
|
7150
|
+
className = _ref$className === void 0 ? '' : _ref$className;
|
|
7139
7151
|
return React__default.createElement(StyledIcon, {
|
|
7140
|
-
className: "
|
|
7152
|
+
className: className + " " + icon,
|
|
7141
7153
|
style: {
|
|
7142
7154
|
fontSize: size,
|
|
7143
7155
|
"--icon-primary-color": iconPrimaryColor,
|