krl-alfred 1.54.1 → 1.54.3
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.
|
@@ -10,7 +10,7 @@ var classnames_1 = __importDefault(require("classnames"));
|
|
|
10
10
|
var Checkbox = function (props) {
|
|
11
11
|
var _a, _b;
|
|
12
12
|
var value = props.value, checked = props.checked, onChange = props.onChange, name = props.name, id = props.id, label = props.label, disabled = props.disabled, size = props.size, description = props.description, valid = props.valid;
|
|
13
|
-
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-14-17"] = size === "medium", _b)), htmlFor: id,
|
|
13
|
+
return ((0, jsx_runtime_1.jsxs)(Checkbox_styled_1.CheckboxStyled, { htmlFor: id, disabled: disabled, checked: checked, size: size, valid: valid, children: [(0, jsx_runtime_1.jsx)("input", { id: id, type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: onChange }), (0, jsx_runtime_1.jsx)("div", { className: "indicator" }), (label || description) && ((0, jsx_runtime_1.jsxs)("div", { className: "labelsWrapper", children: [label && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("label", (_a = {}, _a["caption-semi-bold-12-15"] = size === "small", _a), (_b = {}, _b["body-semi-bold-14-17"] = size === "medium", _b)), htmlFor: id, children: label })), description && ((0, jsx_runtime_1.jsx)("label", { className: (0, classnames_1.default)("description", "body-regular-13-16"), htmlFor: id, children: description }))] }))] }));
|
|
14
14
|
};
|
|
15
15
|
exports.default = Checkbox;
|
|
16
16
|
Checkbox.propTypes = {
|
|
@@ -23,7 +23,6 @@ Checkbox.propTypes = {
|
|
|
23
23
|
checked: prop_types_1.default.bool,
|
|
24
24
|
};
|
|
25
25
|
Checkbox.defaultProps = {
|
|
26
|
-
// emre; componentler peşpeşe kullanıldığında aynı anda render oldukları için math.random aynı sonucu dönüyor. ya default değer verme yada uuidv4 kullan
|
|
27
26
|
size: "small",
|
|
28
27
|
valid: true,
|
|
29
28
|
};
|
|
@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
10
10
|
exports.OverlayStyled = exports.ModalStyled = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
12
|
var devices_1 = require("../../constants/devices");
|
|
13
|
-
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"])), function (props) {
|
|
13
|
+
exports.ModalStyled = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"], ["\n background: white;\n border-radius: 8px;\n box-sizing: border-box;\n max-height: 800px;\n min-height: 300px;\n display: grid;\n grid-template-rows: auto 1fr auto;\n width: ", ";\n ", ";\n \n div.header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 24px;\n border-bottom: ", ";\n box-sizing: border-box;\n\n div.empty {\n width: 32px;\n height: 32px;\n }\n\n div.icon {\n width: 32px;\n height: 32px;\n border-radius: 8px;\n cursor: pointer;\n background: white;\n transition: all .2s;\n\n &:hover {\n box-shadow: 0 6px 30px #EAE9F0;\n }\n\n }\n div.title {\n h5 {\n margin: 0;\n padding: 0;\n }\n p {\n margin: 8px 0 0;\n }\n }\n \n }\n\n div.content {\n padding-left: 24px;\n padding-right: 24px;\n padding-top: ", ";\n padding-bottom: ", ";\n overflow: auto;\n position: relative;\n .contentInner{\n height: 100%;\n }\n }\n\n div.buttons {\n padding: 24px;\n display: flex;\n justify-content: ", ";\n box-sizing: border-box;\n border-top: ", ";\n flex-direction: ", ";\n\n div.divider {\n overflow: hidden;\n text-align: center;\n width: 100%;\n color: var(--dark-opacity-10);\n margin: 16px 0;\n\n &:before, &:after {\n background-color: var(--dark-opacity-10);\n content: \"\";\n display: inline-block;\n height: 1px;\n position: relative;\n vertical-align: middle;\n width: 50%;\n }\n\n &:before {\n right: 8px;\n margin-left: -50%;\n }\n\n &:after {\n left: 8px;\n margin-right: -50%;\n }\n }\n \n button + button {\n margin-right: ", ";\n @media only screen and ", " {\n margin-right: 16px;\n }\n }\n }\n"])), function (props) {
|
|
14
14
|
switch (props.size) {
|
|
15
15
|
case 'small':
|
|
16
16
|
return "375px";
|