albinasoft-ui-package 1.0.51 → 1.0.52

package/dist/components/CustomDateTimePicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-import 'react-datepicker/dist/react-datepicker.css';
+import React from "react";
+import "react-datepicker/dist/react-datepicker.css";
+import "../assets/css/custom-datetime-picker.css";
 declare enum TimeFormat {
     H = "HH",
     M = "mm",

package/dist/components/CustomDateTimePicker.js

@@ -9,6 +9,7 @@ var react_datepicker_1 = __importDefault(require("react-datepicker"));
 require("react-datepicker/dist/react-datepicker.css");
 var react_bootstrap_1 = require("react-bootstrap");
 var fa_1 = require("react-icons/fa");
+require("../assets/css/custom-datetime-picker.css");
 var TimeFormat;
 (function (TimeFormat) {
     TimeFormat["H"] = "HH";
@@ -18,18 +19,28 @@ var TimeFormat;
 exports.TimeFormat = TimeFormat;
 var CustomDateTimePicker = function (_a) {
     var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, style = _a.style, showTimeSelect = _a.showTimeSelect, showTimeSelectOnly = _a.showTimeSelectOnly, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, onChange = _a.onChange;
-    return (react_1.default.createElement("div", { className: className },
+    return (react_1.default.createElement("div", { className: "col-12" },
         react_1.default.createElement("div", { className: "form-group" },
             react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
             react_1.default.createElement("div", { className: "position-relative" },
-                react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip) : react_1.default.createElement(react_1.default.Fragment, null) },
+                react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? (react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip)) : (react_1.default.createElement(react_1.default.Fragment, null)) },
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ''), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showTimeCaption: false, timeFormat: timeFormat, dateFormat: showTimeSelectOnly ? timeFormat : showTimeSelect ? "dd.MM.yyyy HH:mm" : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H ? 60 : timeFormat == TimeFormat.M ? 1 : timeIntervals ? timeIntervals : 30 }))),
+                        react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ""), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showTimeCaption: false, timeFormat: timeFormat, dateFormat: showTimeSelectOnly
+                                ? timeFormat
+                                : showTimeSelect
+                                    ? "dd.MM.yyyy HH:mm"
+                                    : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H
+                                ? 60
+                                : timeFormat == TimeFormat.M
+                                    ? 1
+                                    : timeIntervals
+                                        ? timeIntervals
+                                        : 30 }))),
                 required && !value && (react_1.default.createElement("div", { className: "invalid-feedback text-danger mt-2" },
                     react_1.default.createElement("div", { className: "description-icon" },
                         react_1.default.createElement(fa_1.FaExclamationTriangle, null)),
                     react_1.default.createElement("div", { className: "description-text" },
-                        react_1.default.createElement("span", null, errorMessage || 'This field is required.')))),
+                        react_1.default.createElement("span", null, errorMessage || "This field is required.")))),
                 conditionalErrorVisible && (react_1.default.createElement("div", { className: "conditional-error-message text-warning mt-2" },
                     react_1.default.createElement("div", { className: "description-icon" },
                         react_1.default.createElement(fa_1.FaExclamationTriangle, null)),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {

package/dist/assets/css/custom-autocomplete-input.css

@@ -1,41 +0,0 @@
-.autocomplete-container {
-  position: relative; /* Dropdown'u input'un kapsayıcısına bağlamak için */
-}
-
-.autocomplete-dropdown {
-  background-color: white;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1050;
-  max-height: 200px;
-  overflow-y: auto;
-  position: absolute;
-  width: 100%;
-}
-
-.autocomplete-option {
-  padding: 8px 12px;
-  cursor: pointer;
-}
-
-.autocomplete-option:hover {
-  background-color: #f1f1f1;
-}
-
-/* Dark Mode */
-.dark .autocomplete-dropdown {
-  background-color: #333;
-  color: #fff;
-  border: 1px solid #444;
-}
-
-.dark .autocomplete-option:hover {
-  background-color: #444;
-}
-
-mark {
-  background-color: yellow;
-  color: black;
-  font-weight: bold;
-}

package/dist/assets/css/custom-select.css

@@ -1,47 +0,0 @@
-
-  
-  .dropdown-menu {
-    background: white;
-  }
-  
-  .dark .dropdown-menu {
-    background: #222738;
-  }
-  
-  .dropdown-menu::-webkit-scrollbar-thumb {
-    background-color: #888; /* Scrollbar rengi */
-  }
-  
-  .dropdown-menu::-webkit-scrollbar-thumb:hover {
-    background-color: #555; /* Hover durumunda daha koyu */
-  }
-  
-  .dark .dropdown-menu::-webkit-scrollbar-thumb {
-    background-color: #444; /* Dark tema için scrollbar rengi */
-  }
-  
-  .dark .dropdown-menu::-webkit-scrollbar-thumb:hover {
-    background-color: #666; /* Dark tema hover */
-  }
-  
-  .dropdown-menu::-webkit-scrollbar-track {
-    background: transparent; /* Scrollbar arka planı */
-  }
-  
-  .dark .dropdown-menu::-webkit-scrollbar-track {
-    background: #151824; /* Dark tema için arka plan */
-  }
-  
-  .dropdown-item {
-    padding: 8px 12px;
-    cursor: pointer;
-  }
-  
-  .dropdown-item:hover {
-    background: #f1f1f1;
-  }
-  
-  .dark .dropdown-item:hover {
-    background: #151824;
-  }
-