albinasoft-ui-package 1.1.42 → 1.1.44

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.
Files changed (59) hide show
  1. package/LICENSE +21 -21
  2. package/dist/assets/css/custom-autocomplete-input.css +49 -49
  3. package/dist/assets/css/custom-datatable.css +2 -2
  4. package/dist/assets/css/custom-datetime-picker.css +779 -779
  5. package/dist/assets/css/custom-progress-bar.css +37 -37
  6. package/dist/assets/css/custom-select.css +62 -62
  7. package/dist/assets/css/custom-simple-select.css +117 -117
  8. package/dist/assets/css/custom-timeline.css +43 -43
  9. package/dist/assets/css/custom-treeview.css +84 -0
  10. package/dist/assets/css/dark.css +2159 -2159
  11. package/dist/assets/css/main.css +26664 -26664
  12. package/dist/components/AlbinaForm.d.ts +28 -28
  13. package/dist/components/AlbinaForm.js +88 -88
  14. package/dist/components/CustomAutocompleteInput.d.ts +23 -23
  15. package/dist/components/CustomAutocompleteInput.js +185 -185
  16. package/dist/components/CustomButton.d.ts +14 -14
  17. package/dist/components/CustomButton.js +98 -98
  18. package/dist/components/CustomCheckbox.d.ts +20 -20
  19. package/dist/components/CustomCheckbox.js +58 -58
  20. package/dist/components/CustomDatatable.d.ts +42 -42
  21. package/dist/components/CustomDatatable.js +92 -92
  22. package/dist/components/CustomDateTimePicker.d.ts +33 -33
  23. package/dist/components/CustomDateTimePicker.js +91 -91
  24. package/dist/components/CustomDivider.d.ts +51 -51
  25. package/dist/components/CustomDivider.js +87 -87
  26. package/dist/components/CustomFileUploader.d.ts +65 -65
  27. package/dist/components/CustomFileUploader.js +460 -460
  28. package/dist/components/CustomForm.d.ts +225 -225
  29. package/dist/components/CustomForm.js +259 -243
  30. package/dist/components/CustomInput.d.ts +37 -37
  31. package/dist/components/CustomInput.js +85 -85
  32. package/dist/components/CustomModal.d.ts +15 -15
  33. package/dist/components/CustomModal.js +17 -17
  34. package/dist/components/CustomPhoneInput.d.ts +29 -29
  35. package/dist/components/CustomPhoneInput.js +251 -251
  36. package/dist/components/CustomProgressBar.d.ts +9 -9
  37. package/dist/components/CustomProgressBar.js +40 -40
  38. package/dist/components/CustomRadioButton.d.ts +25 -25
  39. package/dist/components/CustomRadioButton.js +34 -34
  40. package/dist/components/CustomRichTextbox.d.ts +14 -14
  41. package/dist/components/CustomRichTextbox.js +89 -89
  42. package/dist/components/CustomSelect.d.ts +32 -32
  43. package/dist/components/CustomSelect.js +193 -191
  44. package/dist/components/CustomSimpleSelect.d.ts +21 -21
  45. package/dist/components/CustomSimpleSelect.js +64 -64
  46. package/dist/components/CustomTab.d.ts +44 -44
  47. package/dist/components/CustomTab.js +122 -122
  48. package/dist/components/CustomText.d.ts +72 -72
  49. package/dist/components/CustomText.js +158 -158
  50. package/dist/components/CustomTextarea.d.ts +22 -22
  51. package/dist/components/CustomTextarea.js +33 -33
  52. package/dist/components/CustomTimeline.d.ts +30 -30
  53. package/dist/components/CustomTimeline.js +80 -80
  54. package/dist/components/CustomTreeView.d.ts +20 -22
  55. package/dist/components/CustomTreeView.js +168 -157
  56. package/dist/index.d.ts +22 -22
  57. package/dist/index.js +48 -48
  58. package/package.json +44 -43
  59. package/readme.md +9 -9
@@ -1,38 +1,38 @@
1
- .progress-bar-container {
2
- margin-bottom: 30px;
3
- padding: 10px;
4
- width: 100%;
5
- }
6
-
7
- .step-item {
8
- cursor: pointer;
9
- display: flex;
10
- align-items: center;
11
- flex-direction: column;
12
- position: relative;
13
- z-index: 1;
14
- }
15
-
16
- .step-circle {
17
- width: 30px;
18
- height: 30px;
19
- border-radius: 50%;
20
- color: #fff;
21
- display: flex;
22
- justify-content: center;
23
- align-items: center;
24
- font-weight: bold;
25
- margin-bottom: 10px;
26
- }
27
-
28
- .step-label {
29
- font-size: 14px;
30
- font-weight: bold;
31
- }
32
-
33
- .step-line {
34
- flex: 1;
35
- height: 4px;
36
- margin: 0 10px;
37
- }
1
+ .progress-bar-container {
2
+ margin-bottom: 30px;
3
+ padding: 10px;
4
+ width: 100%;
5
+ }
6
+
7
+ .step-item {
8
+ cursor: pointer;
9
+ display: flex;
10
+ align-items: center;
11
+ flex-direction: column;
12
+ position: relative;
13
+ z-index: 1;
14
+ }
15
+
16
+ .step-circle {
17
+ width: 30px;
18
+ height: 30px;
19
+ border-radius: 50%;
20
+ color: #fff;
21
+ display: flex;
22
+ justify-content: center;
23
+ align-items: center;
24
+ font-weight: bold;
25
+ margin-bottom: 10px;
26
+ }
27
+
28
+ .step-label {
29
+ font-size: 14px;
30
+ font-weight: bold;
31
+ }
32
+
33
+ .step-line {
34
+ flex: 1;
35
+ height: 4px;
36
+ margin: 0 10px;
37
+ }
38
38
 
@@ -1,62 +1,62 @@
1
-
2
-
3
- .dropdown-menu {
4
- background: white;
5
- }
6
-
7
- .dark .dropdown-menu {
8
- background: #222738;
9
- }
10
-
11
- .dropdown-menu::-webkit-scrollbar-thumb {
12
- background-color: #888; /* Scrollbar rengi */
13
- }
14
-
15
- .dropdown-menu::-webkit-scrollbar-thumb:hover {
16
- background-color: #555; /* Hover durumunda daha koyu */
17
- }
18
-
19
- .dark .dropdown-menu::-webkit-scrollbar-thumb {
20
- background-color: #444; /* Dark tema için scrollbar rengi */
21
- }
22
-
23
- .dark .dropdown-menu::-webkit-scrollbar-thumb:hover {
24
- background-color: #666; /* Dark tema hover */
25
- }
26
-
27
- .dropdown-menu::-webkit-scrollbar-track {
28
- background: transparent; /* Scrollbar arka planı */
29
- }
30
-
31
- .dark .dropdown-menu::-webkit-scrollbar-track {
32
- background: #151824; /* Dark tema için arka plan */
33
- }
34
-
35
- .dropdown-item {
36
- padding: 8px 12px;
37
- cursor: pointer;
38
- }
39
-
40
- .dropdown-item:hover {
41
- background: #f1f1f1;
42
- }
43
-
44
- .dark .dropdown-item:hover {
45
- background: #151824;
46
- }
47
-
48
- /* custom-search-input */
49
- .custom-search-input {
50
- font-size: 1rem;
51
- border: 2px solid #007bff;
52
- border-radius: 4px;
53
- }
54
-
55
- .custom-search-input::placeholder {
56
- color: #6c757d;
57
- font-style: italic;
58
- }
59
-
60
- .custom-search-input:focus {
61
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
62
- }
1
+
2
+
3
+ .dropdown-menu {
4
+ background: white;
5
+ }
6
+
7
+ .dark .dropdown-menu {
8
+ background: #222738;
9
+ }
10
+
11
+ .dropdown-menu::-webkit-scrollbar-thumb {
12
+ background-color: #888; /* Scrollbar rengi */
13
+ }
14
+
15
+ .dropdown-menu::-webkit-scrollbar-thumb:hover {
16
+ background-color: #555; /* Hover durumunda daha koyu */
17
+ }
18
+
19
+ .dark .dropdown-menu::-webkit-scrollbar-thumb {
20
+ background-color: #444; /* Dark tema için scrollbar rengi */
21
+ }
22
+
23
+ .dark .dropdown-menu::-webkit-scrollbar-thumb:hover {
24
+ background-color: #666; /* Dark tema hover */
25
+ }
26
+
27
+ .dropdown-menu::-webkit-scrollbar-track {
28
+ background: transparent; /* Scrollbar arka planı */
29
+ }
30
+
31
+ .dark .dropdown-menu::-webkit-scrollbar-track {
32
+ background: #151824; /* Dark tema için arka plan */
33
+ }
34
+
35
+ .dropdown-item {
36
+ padding: 8px 12px;
37
+ cursor: pointer;
38
+ }
39
+
40
+ .dropdown-item:hover {
41
+ background: #f1f1f1;
42
+ }
43
+
44
+ .dark .dropdown-item:hover {
45
+ background: #151824;
46
+ }
47
+
48
+ /* custom-search-input */
49
+ .custom-search-input {
50
+ font-size: 1rem;
51
+ border: 2px solid #007bff;
52
+ border-radius: 4px;
53
+ }
54
+
55
+ .custom-search-input::placeholder {
56
+ color: #6c757d;
57
+ font-style: italic;
58
+ }
59
+
60
+ .custom-search-input:focus {
61
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
62
+ }
@@ -1,117 +1,117 @@
1
- .dropdown-menu {
2
- background: white;
3
- max-height: 200px;
4
- overflow-y: auto;
5
- }
6
-
7
- .dropdown-menu::-webkit-scrollbar-thumb {
8
-
9
- background-color: #888;
10
- }
11
-
12
- .dropdown-menu::-webkit-scrollbar-thumb:hover {
13
-
14
- background-color: #555;
15
- }
16
-
17
- .dropdown-menu::-webkit-scrollbar-track {
18
-
19
- background: transparent;
20
- }
21
-
22
- /* WebKit-tabanlı tarayıcılar için */
23
- .dark .dropdown-menu::-webkit-scrollbar {
24
- width: 8px;
25
- }
26
-
27
- .dark .dropdown-menu::-webkit-scrollbar-thumb {
28
- background-color: #444;
29
- border-radius: 4px;
30
- }
31
-
32
- .dark .dropdown-menu::-webkit-scrollbar-thumb:hover {
33
- background-color: #666;
34
- }
35
-
36
- .dark .dropdown-menu::-webkit-scrollbar-track {
37
- background: #151824;
38
- }
39
-
40
- .dark .dropdown-menu {
41
- scrollbar-color: #444 #151824;
42
- }
43
-
44
- .dropdown-item {
45
- padding: 8px 12px;
46
- cursor: pointer;
47
- }
48
-
49
- .dropdown-item:hover {
50
- background: #f1f1f1;
51
- }
52
-
53
- .dark .dropdown-item:hover {
54
- background: #151824;
55
- }
56
-
57
- .simple-select.form-control {
58
- white-space: nowrap;
59
- overflow: hidden;
60
- cursor: pointer;
61
-
62
- padding: 0.5rem;
63
- margin-left : 3rem;
64
- display: flex;
65
- align-items: center;
66
- border: 1px solid var(--bs-primary);
67
- border-radius: 3rem;
68
- width: 300px !important;
69
-
70
- }
71
-
72
- .simple-select .selected {
73
- font-weight: 600;
74
- /* color:var(--bs-primary) */
75
- }
76
-
77
- .simple-select .icon-left,
78
- .simple-select .icon-right {
79
- flex: none;
80
- color: #6c757d;
81
- }
82
- .simple-select .icon-left {
83
- margin-right: 0.5rem;
84
- color:var(--bs-primary)
85
- }
86
-
87
- .custom-search-input {
88
- font-size: 1rem;
89
- border: 2px solid #007bff;
90
- border-radius: 4px;
91
- }
92
-
93
- .custom-search-input::placeholder {
94
- color: #6c757d;
95
- font-style: italic;
96
- }
97
-
98
- .custom-search-input:focus {
99
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
100
- }
101
-
102
- /* custom-search-input */
103
- .custom-search-input {
104
- font-size: 1rem;
105
- border: 2px solid #007bff;
106
- border-radius: 4px;
107
- }
108
-
109
- .custom-search-input::placeholder {
110
- color: #6c757d;
111
- font-style: italic;
112
- }
113
-
114
- .custom-search-input:focus {
115
- box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
116
- }
117
-
1
+ .dropdown-menu {
2
+ background: white;
3
+ max-height: 200px;
4
+ overflow-y: auto;
5
+ }
6
+
7
+ .dropdown-menu::-webkit-scrollbar-thumb {
8
+
9
+ background-color: #888;
10
+ }
11
+
12
+ .dropdown-menu::-webkit-scrollbar-thumb:hover {
13
+
14
+ background-color: #555;
15
+ }
16
+
17
+ .dropdown-menu::-webkit-scrollbar-track {
18
+
19
+ background: transparent;
20
+ }
21
+
22
+ /* WebKit-tabanlı tarayıcılar için */
23
+ .dark .dropdown-menu::-webkit-scrollbar {
24
+ width: 8px;
25
+ }
26
+
27
+ .dark .dropdown-menu::-webkit-scrollbar-thumb {
28
+ background-color: #444;
29
+ border-radius: 4px;
30
+ }
31
+
32
+ .dark .dropdown-menu::-webkit-scrollbar-thumb:hover {
33
+ background-color: #666;
34
+ }
35
+
36
+ .dark .dropdown-menu::-webkit-scrollbar-track {
37
+ background: #151824;
38
+ }
39
+
40
+ .dark .dropdown-menu {
41
+ scrollbar-color: #444 #151824;
42
+ }
43
+
44
+ .dropdown-item {
45
+ padding: 8px 12px;
46
+ cursor: pointer;
47
+ }
48
+
49
+ .dropdown-item:hover {
50
+ background: #f1f1f1;
51
+ }
52
+
53
+ .dark .dropdown-item:hover {
54
+ background: #151824;
55
+ }
56
+
57
+ .simple-select.form-control {
58
+ white-space: nowrap;
59
+ overflow: hidden;
60
+ cursor: pointer;
61
+
62
+ padding: 0.5rem;
63
+ margin-left : 3rem;
64
+ display: flex;
65
+ align-items: center;
66
+ border: 1px solid var(--bs-primary);
67
+ border-radius: 3rem;
68
+ width: 300px !important;
69
+
70
+ }
71
+
72
+ .simple-select .selected {
73
+ font-weight: 600;
74
+ /* color:var(--bs-primary) */
75
+ }
76
+
77
+ .simple-select .icon-left,
78
+ .simple-select .icon-right {
79
+ flex: none;
80
+ color: #6c757d;
81
+ }
82
+ .simple-select .icon-left {
83
+ margin-right: 0.5rem;
84
+ color:var(--bs-primary)
85
+ }
86
+
87
+ .custom-search-input {
88
+ font-size: 1rem;
89
+ border: 2px solid #007bff;
90
+ border-radius: 4px;
91
+ }
92
+
93
+ .custom-search-input::placeholder {
94
+ color: #6c757d;
95
+ font-style: italic;
96
+ }
97
+
98
+ .custom-search-input:focus {
99
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
100
+ }
101
+
102
+ /* custom-search-input */
103
+ .custom-search-input {
104
+ font-size: 1rem;
105
+ border: 2px solid #007bff;
106
+ border-radius: 4px;
107
+ }
108
+
109
+ .custom-search-input::placeholder {
110
+ color: #6c757d;
111
+ font-style: italic;
112
+ }
113
+
114
+ .custom-search-input:focus {
115
+ box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
116
+ }
117
+
@@ -1,43 +1,43 @@
1
- .timeline-item {
2
- position: relative;
3
- }
4
-
5
- .timeline-line {
6
- position: absolute;
7
- left: 1.15rem;
8
- top: 2rem;
9
- height: calc(100% - 2rem);
10
- width: 0.15rem;
11
- background-color: var(--bs-body-color);
12
- z-index: 0;
13
- }
14
-
15
- .timeline-dots {
16
- position: absolute;
17
- top: 0.25rem !important;
18
- left: -0.025rem !important;
19
- width: 2rem;
20
- height: 2rem;
21
- border-radius: 50%;
22
- cursor: pointer;
23
- z-index: 1;
24
- background-color: white;
25
- border-width: 2px;
26
- border-style: solid;
27
- display: flex;
28
- align-items: center;
29
- justify-content: center;
30
- font-size: 0.9rem;
31
- }
32
-
33
- .expandable-content {
34
- max-height: 0;
35
- opacity: 0;
36
- overflow: hidden;
37
- transition: all 0.4s ease-in-out;
38
- }
39
-
40
- .expandable-content.expanded {
41
- max-height: 10000px;
42
- opacity: 1;
43
- }
1
+ .timeline-item {
2
+ position: relative;
3
+ }
4
+
5
+ .timeline-line {
6
+ position: absolute;
7
+ left: 1.15rem;
8
+ top: 2rem;
9
+ height: calc(100% - 2rem);
10
+ width: 0.15rem;
11
+ background-color: var(--bs-body-color);
12
+ z-index: 0;
13
+ }
14
+
15
+ .timeline-dots {
16
+ position: absolute;
17
+ top: 0.25rem !important;
18
+ left: -0.025rem !important;
19
+ width: 2rem;
20
+ height: 2rem;
21
+ border-radius: 50%;
22
+ cursor: pointer;
23
+ z-index: 1;
24
+ background-color: white;
25
+ border-width: 2px;
26
+ border-style: solid;
27
+ display: flex;
28
+ align-items: center;
29
+ justify-content: center;
30
+ font-size: 0.9rem;
31
+ }
32
+
33
+ .expandable-content {
34
+ max-height: 0;
35
+ opacity: 0;
36
+ overflow: hidden;
37
+ transition: all 0.4s ease-in-out;
38
+ }
39
+
40
+ .expandable-content.expanded {
41
+ max-height: 10000px;
42
+ opacity: 1;
43
+ }
@@ -0,0 +1,84 @@
1
+ .form-control-unreq {
2
+ display: block;
3
+ width: 100%;
4
+ padding: .5rem 1rem;
5
+ font-size: 1rem;
6
+ font-weight: 400;
7
+ line-height: 1.5;
8
+
9
+ background-color: #fff;
10
+ -webkit-background-clip: padding-box;
11
+ background-clip: padding-box;
12
+ border: 1px solid #131313;
13
+ -webkit-appearance: none;
14
+ -moz-appearance: none;
15
+ appearance: none;
16
+ -webkit-border-radius: .25rem;
17
+ border-radius: .25rem;
18
+ -webkit-box-shadow: 0 0 0 0;
19
+ box-shadow: 0 0 0 0;
20
+ -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
21
+ transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
22
+ -o-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
23
+ transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
24
+ transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
25
+
26
+ all: unset;
27
+ width: 100%;
28
+ padding: 0.375rem 0.75rem;
29
+ border: 1px solid #ccc;
30
+ border-radius: 0.25rem;
31
+ }
32
+
33
+ @media(prefers-reduced-motion: reduce) {
34
+ .form-control-unreq {
35
+ -webkit-transition: none;
36
+ -o-transition: none;
37
+ transition: none
38
+ }
39
+ }
40
+
41
+ .dark .form-control-unreq {
42
+ color: #A2A4A9;
43
+ background-color: #222738;
44
+ border-color: #30384f;
45
+ border: 1px solid rgba(255, 255, 255, .1);
46
+ }
47
+
48
+ .dark .form-control-unreq::placeholder {
49
+ color: #6c757d; /* Lighter shade to make it visible */
50
+ opacity: 1; /* Ensure the placeholder color is solid */
51
+ }
52
+
53
+
54
+ .was-validated .form-control-unreq:valid:focus,
55
+ .form-control-unreq.is-valid:focus {
56
+ border-color: #1aa053;
57
+ -webkit-box-shadow: 0 0 0rem 0rem rgba(26, 160, 83, .15);
58
+ box-shadow: 0 0 0rem 0rem rgba(26, 160, 83, .15)
59
+ }
60
+
61
+ .was-validated textarea.form-control-unreq:valid,
62
+ textarea.form-control-unreq.is-valid {
63
+ padding-right: -webkit-calc(1.5em + 1rem);
64
+ padding-right: calc(1.5em + 1rem);
65
+ background-position: top -webkit-calc(0.375em + 0.25rem) right -webkit-calc(0.375em + 0.25rem);
66
+ background-position: top calc(0.375em + 0.25rem) right calc(0.375em + 0.25rem)
67
+ }
68
+
69
+
70
+ .treeview-input-group {
71
+ display: flex;
72
+ gap: 0.5rem;
73
+ align-items: center;
74
+ }
75
+
76
+ .treeview-input-group input {
77
+ flex-grow: 1;
78
+ min-width: 0; /* Overflow kontrolü */
79
+ }
80
+
81
+ .treeview-input-group button {
82
+ white-space: nowrap;
83
+ }
84
+