@ardium-ui/ui 5.0.0-alpha.74 → 5.0.0-alpha.76

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 (133) hide show
  1. package/fesm2022/ardium-ui-ui.mjs +106 -106
  2. package/fesm2022/ardium-ui-ui.mjs.map +1 -1
  3. package/lib/slider/range-slider/range-slider.component.d.ts +1 -1
  4. package/package.json +1 -1
  5. package/prebuilt-themes/default/badge.css +222 -221
  6. package/prebuilt-themes/default/badge.css.map +1 -1
  7. package/prebuilt-themes/default/buttons/button.css +305 -304
  8. package/prebuilt-themes/default/buttons/button.css.map +1 -1
  9. package/prebuilt-themes/default/buttons/fab.css +302 -303
  10. package/prebuilt-themes/default/buttons/fab.css.map +1 -1
  11. package/prebuilt-themes/default/buttons/icon-button.css +290 -290
  12. package/prebuilt-themes/default/buttons/icon-button.css.map +1 -1
  13. package/prebuilt-themes/default/calendar.css +364 -364
  14. package/prebuilt-themes/default/calendar.css.map +1 -1
  15. package/prebuilt-themes/default/card.css +130 -137
  16. package/prebuilt-themes/default/card.css.map +1 -1
  17. package/prebuilt-themes/default/checkbox-list.css +74 -72
  18. package/prebuilt-themes/default/checkbox-list.css.map +1 -1
  19. package/prebuilt-themes/default/checkbox.css +339 -338
  20. package/prebuilt-themes/default/checkbox.css.map +1 -1
  21. package/prebuilt-themes/default/chips.css +384 -383
  22. package/prebuilt-themes/default/chips.css.map +1 -1
  23. package/prebuilt-themes/default/color-display.css +28 -26
  24. package/prebuilt-themes/default/color-display.css.map +1 -1
  25. package/prebuilt-themes/default/color-picker.css +105 -103
  26. package/prebuilt-themes/default/color-picker.css.map +1 -1
  27. package/prebuilt-themes/default/core.css +13 -9
  28. package/prebuilt-themes/default/core.css.map +1 -1
  29. package/prebuilt-themes/default/dialog.css +15 -15
  30. package/prebuilt-themes/default/dialog.css.map +1 -1
  31. package/prebuilt-themes/default/divider.css +73 -72
  32. package/prebuilt-themes/default/divider.css.map +1 -1
  33. package/prebuilt-themes/default/dropdown-panel.css +35 -34
  34. package/prebuilt-themes/default/dropdown-panel.css.map +1 -1
  35. package/prebuilt-themes/default/file-drop-area.css +286 -285
  36. package/prebuilt-themes/default/file-drop-area.css.map +1 -1
  37. package/prebuilt-themes/default/form-field-frame.css +102 -102
  38. package/prebuilt-themes/default/form-field-frame.css.map +1 -1
  39. package/prebuilt-themes/default/form-field.css +127 -129
  40. package/prebuilt-themes/default/form-field.css.map +1 -1
  41. package/prebuilt-themes/default/inputs/autocomplete-input.css +163 -162
  42. package/prebuilt-themes/default/inputs/autocomplete-input.css.map +1 -1
  43. package/prebuilt-themes/default/inputs/color-input.css +99 -98
  44. package/prebuilt-themes/default/inputs/color-input.css.map +1 -1
  45. package/prebuilt-themes/default/inputs/date-input.css +125 -125
  46. package/prebuilt-themes/default/inputs/date-input.css.map +1 -1
  47. package/prebuilt-themes/default/inputs/digit-input.css +110 -111
  48. package/prebuilt-themes/default/inputs/digit-input.css.map +1 -1
  49. package/prebuilt-themes/default/inputs/file-input.css +358 -359
  50. package/prebuilt-themes/default/inputs/file-input.css.map +1 -1
  51. package/prebuilt-themes/default/inputs/hex-input.css +140 -138
  52. package/prebuilt-themes/default/inputs/hex-input.css.map +1 -1
  53. package/prebuilt-themes/default/inputs/input.css +128 -126
  54. package/prebuilt-themes/default/inputs/input.css.map +1 -1
  55. package/prebuilt-themes/default/inputs/number-input.css +204 -204
  56. package/prebuilt-themes/default/inputs/number-input.css.map +1 -1
  57. package/prebuilt-themes/default/inputs/password-input.css +98 -97
  58. package/prebuilt-themes/default/inputs/password-input.css.map +1 -1
  59. package/prebuilt-themes/default/kbd-shortcut.css +10 -8
  60. package/prebuilt-themes/default/kbd-shortcut.css.map +1 -1
  61. package/prebuilt-themes/default/kbd.css +17 -15
  62. package/prebuilt-themes/default/kbd.css.map +1 -1
  63. package/prebuilt-themes/default/modal.css +79 -77
  64. package/prebuilt-themes/default/modal.css.map +1 -1
  65. package/prebuilt-themes/default/progress-bar.css +250 -234
  66. package/prebuilt-themes/default/progress-bar.css.map +1 -1
  67. package/prebuilt-themes/default/progress-circle.css +172 -170
  68. package/prebuilt-themes/default/progress-circle.css.map +1 -1
  69. package/prebuilt-themes/default/radio.css +231 -232
  70. package/prebuilt-themes/default/radio.css.map +1 -1
  71. package/prebuilt-themes/default/segment.css +414 -412
  72. package/prebuilt-themes/default/segment.css.map +1 -1
  73. package/prebuilt-themes/default/select.css +274 -275
  74. package/prebuilt-themes/default/select.css.map +1 -1
  75. package/prebuilt-themes/default/slide-toggle.css +294 -293
  76. package/prebuilt-themes/default/slide-toggle.css.map +1 -1
  77. package/prebuilt-themes/default/slider.css +370 -369
  78. package/prebuilt-themes/default/slider.css.map +1 -1
  79. package/prebuilt-themes/default/snackbar.css +173 -172
  80. package/prebuilt-themes/default/snackbar.css.map +1 -1
  81. package/prebuilt-themes/default/spinner.css +156 -155
  82. package/prebuilt-themes/default/spinner.css.map +1 -1
  83. package/prebuilt-themes/default/stars.css +259 -262
  84. package/prebuilt-themes/default/stars.css.map +1 -1
  85. package/prebuilt-themes/default/tabber.css +234 -233
  86. package/prebuilt-themes/default/tabber.css.map +1 -1
  87. package/prebuilt-themes/default/table-pagination.css +46 -45
  88. package/prebuilt-themes/default/table-pagination.css.map +1 -1
  89. package/prebuilt-themes/default/table.css +441 -439
  90. package/prebuilt-themes/default/table.css.map +1 -1
  91. package/themes/default/badge.scss +92 -90
  92. package/themes/default/buttons/button.scss +70 -68
  93. package/themes/default/buttons/fab.scss +63 -61
  94. package/themes/default/buttons/icon-button.scss +56 -54
  95. package/themes/default/calendar.scss +215 -211
  96. package/themes/default/card.scss +133 -131
  97. package/themes/default/checkbox-list.scss +70 -68
  98. package/themes/default/checkbox.scss +55 -53
  99. package/themes/default/chips.scss +166 -159
  100. package/themes/default/color-display.scss +31 -29
  101. package/themes/default/color-picker.scss +95 -93
  102. package/themes/default/core.scss +14 -9
  103. package/themes/default/dialog.scss +15 -13
  104. package/themes/default/divider.scss +79 -77
  105. package/themes/default/dropdown-panel.scss +37 -35
  106. package/themes/default/file-drop-area.scss +152 -150
  107. package/themes/default/form-field-frame.scss +69 -67
  108. package/themes/default/form-field.scss +109 -107
  109. package/themes/default/inputs/autocomplete-input.scss +61 -59
  110. package/themes/default/inputs/color-input.scss +34 -32
  111. package/themes/default/inputs/date-input.scss +63 -61
  112. package/themes/default/inputs/digit-input.scss +83 -81
  113. package/themes/default/inputs/file-input.scss +113 -111
  114. package/themes/default/inputs/hex-input.scss +39 -37
  115. package/themes/default/inputs/input.scss +27 -25
  116. package/themes/default/inputs/number-input.scss +137 -135
  117. package/themes/default/inputs/password-input.scss +60 -58
  118. package/themes/default/kbd-shortcut.scss +9 -7
  119. package/themes/default/kbd.scss +19 -17
  120. package/themes/default/modal.scss +79 -77
  121. package/themes/default/progress-bar.scss +127 -103
  122. package/themes/default/progress-circle.scss +41 -39
  123. package/themes/default/radio.scss +92 -90
  124. package/themes/default/segment.scss +260 -255
  125. package/themes/default/select.scss +206 -204
  126. package/themes/default/slide-toggle.scss +146 -144
  127. package/themes/default/slider.scss +185 -179
  128. package/themes/default/snackbar.scss +32 -30
  129. package/themes/default/spinner.scss +16 -14
  130. package/themes/default/stars.scss +81 -79
  131. package/themes/default/tabber.scss +86 -84
  132. package/themes/default/table-pagination.scss +47 -46
  133. package/themes/default/table.scss +342 -340
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/segment.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECuCA;;ACzEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnGF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAGJ;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;;AAOF;EAEE;;AAEF;EACE;;AAEF;EACE;;AD3CF;EC9BA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDuBE;;AAIF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAQJ;EACE;;AAIF;EACE;;AAIF;EACE;;AAOA;EACE;;AAIF;EACE;;AAOR;EACE;;AAII;EACE;;AAGF;EACE;;AAKR;EAEE,YG/IC;EHgJD;;AAEA;EACE;;AAEA;EACE;EACA;;AAGJ;EAGE;;AAEA;EACE;;AAEA;EACE;;AAGF;EACE;;AAOF;EACE;;AAIE;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AAMF;EACE;EACA;;AAEF;EACE;EACA;;AAEF;EACE;;AAQN;EACE;;AAEF;EACE;;AAMN;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACE;EACA;;AAGE;EACE;;AAEA;EACE;;AAGA;EACE;;AAGJ;EACE;EACA;;AAEA;EACE;;AAQV;EAGE;EACA;;AAGE;EACE;;AAON;EAEE;;AAGE;EACE;;AAIN;EAEE;;AAGE;EACE;;AAIN;EACE;;AAKA;EACE;EACA;;AAEA;EACE;EACA;;AAMJ;EACE;EACA;EACA;EACA;;AAKJ;EACE;EACA;;AAEA;EACE;;AAKA;AAAA;EAEE;;AAEF;EACE","file":"segment.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/segment.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;ICsCF;;ECzEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDnGF;IACE;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAGJ;IACE;IACA;;EAEA;IACE;;EAEF;IACE;;EAGJ;IACE;IACA;;EAOF;IAEE;;EAEF;IACE;;EAEF;IACE;;ED1CA;IC/BF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IDwBI;;EAIF;IACE;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,YACE;IAIF;IACA;IACA;;EAEA;IACE;IACA;;EAGF;IACE;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;EAQJ;IACE;;EAIF;IACE;;EAIF;IACE;;EAOA;IACE;;EAIF;IACE;;EAOR;IACE;;EAII;IACE;;EAGF;IACE;;EAKR;IAEE,YGnJD;IHoJC;;EAEA;IACE;;EAEA;IACE;IACA;;EAGJ;IAGE;;EAEA;IACE;;EAEA;IACE;;EAGF;IACE;;EAOF;IACE;;EAIE;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAMF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EAMF;IACE;IACA;;EAEF;IACE;IACA;;EAEF;IACE;;EAQN;IACE;;EAEF;IACE;;EAMN;IACE;IACA;;EAGJ;IACE;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGJ;IACE;IACA;;EAGE;IACE;;EAEA;IACE;;EAGA;IACE;;EAGJ;IACE;IACA;;EAEA;IACE;;EAQV;IAGE;IACA;;EAGE;IACE;;EAON;IAEE;;EAGE;IACE;;EAIN;IAEE;;EAGE;IACE;;EAIN;IACE;;EAKA;IACE;IACA;;EAEA;IACE;IACA;;EAMJ;IACE;IACA;IACA;IACA;;EAKJ;IACE;IACA;;EAEA;IACE;;EAKA;AAAA;IAEE;;EAEF;IACE","file":"segment.css"}
@@ -27,282 +27,281 @@
27
27
  --ard-select-dropdown-add-custom-label-font-size: 85%;
28
28
  }
29
29
 
30
- .ard-select {
31
- box-sizing: border-box;
32
- width: 100%;
33
- min-height: var(--ard-select-height, var(--ard-form-field-height, 2.3125rem));
34
- display: grid;
35
- align-items: center;
36
- grid-template-columns: 1fr max-content;
37
- gap: var(--ard-select-gap, 0.625rem);
38
- padding: var(--ard-select-padding, 0 1em 0 0.375em);
39
- font-family: var(--ard-font-family);
40
- font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
41
- color: var(--ard-select-text-color, var(--ard-text, rgb(0, 0, 0)));
42
- }
43
- .ard-select ard-clear-button {
44
- height: var(--ard-clear-button-size);
45
- width: var(--ard-clear-button-size);
46
- position: relative;
47
- }
48
- .ard-select .ard-clear-btn-wrapper {
49
- cursor: pointer;
50
- font-size: medium;
51
- color: var(--ard-detail);
52
- width: var(--ard-clear-button-size);
53
- height: var(--ard-clear-button-size);
54
- line-height: 1em;
55
- border-radius: 999px;
56
- border: none;
57
- padding: 0;
58
- background: transparent;
59
- position: absolute;
60
- left: 50%;
61
- top: 50%;
62
- transform: translate(-50%, -50%);
63
- outline: none;
64
- color: inherit;
65
- }
66
- .ard-select .ard-clear-btn-wrapper .ard-hitbox {
67
- position: absolute;
68
- left: -1px;
69
- right: -1px;
70
- top: -1px;
71
- bottom: -1px;
72
- }
73
- .ard-select .ard-clear-btn-wrapper .ard-focus-overlay {
74
- position: absolute;
75
- top: calc(-1 * 1px);
76
- bottom: calc(-1 * 1px);
77
- left: calc(-1 * 1px);
78
- right: calc(-1 * 1px);
79
- opacity: 0;
80
- border-radius: inherit;
81
- pointer-events: none;
82
- transition: opacity 0.2s ease;
83
- background: currentColor;
84
- }
85
- .ard-select .ard-clear-btn-wrapper .ard-clear-btn {
86
- position: absolute;
87
- left: 50%;
88
- top: 50%;
89
- transform: translate(-50%, -50%);
90
- }
91
- .ard-select .ard-clear-btn-wrapper .ard-clear-btn::before {
92
- content: "close";
93
- font-family: "Material Symbols Outlined";
94
- font-size: 1.5em;
95
- font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
96
- font-size: 70%;
97
- }
98
- .ard-select .ard-clear-btn-wrapper:hover .ard-focus-overlay {
99
- opacity: 5%;
100
- }
101
- .ard-select .ard-clear-btn-wrapper:focus .ard-focus-overlay {
102
- opacity: 8%;
103
- }
104
- .ard-select .ard-clear-btn-wrapper:active .ard-focus-overlay {
105
- opacity: 15%;
106
- }
107
- .ard-select .ard-select-value-container {
108
- position: relative;
109
- height: 2em;
110
- display: flex;
111
- align-items: center;
112
- font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
113
- text-size-adjust: 100%;
114
- flex-grow: 1;
115
- overflow: hidden;
116
- }
117
- .ard-select .ard-select-value-container .ard-placeholder {
118
- font: inherit;
119
- position: absolute;
120
- color: var(--ard-select-placeholder-color, var(--ard-text3, rgba(0, 0, 0, 0.75)));
121
- white-space: nowrap;
122
- overflow: hidden;
123
- text-overflow: ellipsis;
124
- width: max-content;
125
- max-width: 100%;
126
- pointer-events: none;
127
- }
128
- .ard-select .ard-select-value-container .ard-search-input {
129
- width: 100%;
130
- max-width: 100%;
131
- }
132
- .ard-select .ard-select-value-container .ard-search-input input {
133
- border: none;
134
- background: transparent;
135
- outline: none;
136
- font: inherit;
137
- padding-left: 1px;
138
- display: block;
139
- width: 100%;
140
- max-width: 100%;
141
- }
142
- .ard-select .ard-select-controls {
143
- display: flex;
144
- align-items: center;
145
- gap: var(--ard-select-controls-gap, 0.625rem);
146
- width: max-content;
147
- }
148
- .ard-select.ard-singleselect .ard-value {
149
- width: max-content;
150
- white-space: nowrap;
151
- }
152
- .ard-select:not(.ard-searchable) .ard-search-input, .ard-select.ard-singleselect .ard-search-input {
153
- position: absolute;
154
- top: 50%;
155
- left: 0;
156
- transform: translateY(-50%) translateX(-1px);
157
- width: max-content;
158
- }
159
- .ard-select:not(.ard-searchable) .ard-search-input input, .ard-select.ard-singleselect .ard-search-input input {
160
- width: max-content;
161
- }
162
- .ard-select:not(.ard-searchable) .ard-search-input {
163
- pointer-events: none;
164
- }
165
- .ard-select.ard-multiselect {
166
- height: max-content;
167
- }
168
- .ard-select.ard-multiselect .ard-select-value-container {
169
- height: max-content;
170
- min-height: 1.5625em;
171
- padding: var(--ard-select-multiselect-padding, 0.25em 0);
172
- box-sizing: border-box;
173
- flex-wrap: wrap;
174
- gap: var(--ard-select-multiselect-chip-gap, 0.375rem);
175
- justify-content: stretch;
176
- }
177
- .ard-select.ard-multiselect .ard-select-value-container .ard-chip-wrapper {
178
- margin: 0;
179
- }
180
- .ard-select.ard-multiselect .ard-search-input {
181
- flex-grow: 1;
182
- width: unset !important;
183
- min-width: var(--ard-select-search-min-width, 10ch);
184
- }
185
- .ard-select.ard-multiselect .ard-search-input input {
186
- width: var(--ard-select-search-min-width, 10ch) !important;
187
- }
188
- .ard-select.ard-multiselect .ard-chip-wrapper {
189
- margin: 0;
190
- }
191
- .ard-select .ard-dropdown-arrow-wrapper {
192
- display: flex;
193
- align-items: center;
194
- height: max-content;
195
- width: max-content;
196
- background-color: transparent;
197
- border: none;
198
- cursor: pointer;
199
- transition: transform var(--ard-select-dropdown-arrow-transition, 0.2s ease-in-out);
200
- }
201
- .ard-select .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
202
- border: calc(var(--ard-dropdown-button-size) / 2) solid transparent;
203
- position: relative;
204
- border-bottom-color: var(--ard-select-dropdown-arrow-color, var(--ard-detail));
205
- border-right-color: var(--ard-select-dropdown-arrow-color, var(--ard-detail));
206
- transform: rotate(45deg) translate(-17.67771%, -17.67771%);
207
- }
208
- .ard-select.ard-dropdown-open .ard-dropdown-arrow-wrapper {
209
- transform: var(--ard-select-dropdown-arrow-active-transform, rotate(180deg));
210
- }
211
- .ard-select.ard-compact {
212
- font-size: var(--ard-select-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
213
- min-height: var(--ard-select-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
214
- padding: var(--ard-select-padding-compact, 0 0.625em 0 0.375em);
215
- }
216
- .ard-select.ard-compact .ard-select-controls {
217
- gap: var(--ard-select-controls-gap-compact, 0.5rem);
218
- }
219
- .ard-select.ard-compact .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
220
- border-width: calc(var(--ard-dropdown-button-size) / 2.4);
221
- }
222
-
223
- .ard-select-dropdown-panel {
224
- right: 0;
225
- width: var(--ard-select-dropdown-width, max-content);
226
- max-width: var(--ard-select-dropdown-max-width, max(25em, 100%));
227
- min-width: var(--ard-select-dropdown-min-width, 100%);
228
- font-size: var(--ard-select-dropdown-font-size, var(--ard-form-field-font-size, 1rem));
229
- }
230
- .ard-select-dropdown-panel .ard-dropdown-panel-content {
231
- padding: var(--ard-select-dropdown-padding, 0.375em 0.625em);
232
- max-height: var(--ard-select-dropdown-max-height, 15em);
233
- overflow: hidden auto;
234
- }
235
- .ard-select-dropdown-panel .ard-optgroup {
236
- display: flex;
237
- flex-direction: column;
238
- cursor: pointer;
239
- }
240
- .ard-select-dropdown-panel .ard-optgroup-children {
241
- cursor: default;
242
- }
243
- .ard-select-dropdown-panel .ard-optgroup-label {
244
- font-size: var(--ard-select-dropdown-optgroup-label-font-size, 0.875em);
245
- font-weight: var(--ard-select-dropdown-optgroup-label-font-weight, 600);
246
- letter-spacing: 0.25px;
247
- padding: var(--ard-select-dropdown-optgroup-label-padding, 0.375em 0.625em 0.0625em 0.625em);
248
- }
249
- .ard-select-dropdown-panel .ard-option {
250
- padding: var(--ard-select-dropdown-option-padding, 0.375em 0.625em);
251
- color: var(--ard-select-dropdown-option-text-color, var(--ard-text2, rgba(0, 0, 0, 0.87)));
252
- cursor: pointer;
253
- }
254
- .ard-select-dropdown-panel .ard-option.ard-option-highlighted {
255
- background: var(--ard-select-dropdown-option-highlighted-bg, var(--ard-darken-overlay-light));
256
- }
257
- .ard-select-dropdown-panel .ard-option.ard-option-selected {
258
- font-weight: var(--ard-select-dropdown-option-selected-font-weight, 500);
259
- background: var(--ard-select-dropdown-option-selected-bg, var(--ard-darken-overlay-medium));
260
- }
261
- .ard-select-dropdown-panel .ard-option.ard-option-selected.ard-option-highlighted {
262
- background: var(--ard-select-dropdown-option-selected-highlighted-bg, var(--ard-darken-overlay-medium-strong));
263
- }
264
- .ard-select-dropdown-panel .ard-option.ard-option-disabled {
265
- pointer-events: none;
266
- opacity: var(--ard-select-dropdown-option-disabled-opacity, 50%);
267
- }
268
- .ard-select-dropdown-panel hr.ard-divider {
269
- width: calc(100% - 1.25em);
270
- margin: 0.375em 0.625em;
271
- border: none;
272
- border-bottom: 1px solid var(--ard-darken-overlay-strong);
273
- }
274
- .ard-select-dropdown-panel .ard-optgroup:first-child > hr.ard-divider {
275
- display: none;
276
- }
277
- .ard-select-dropdown-panel .ard-add-custom {
278
- display: flex;
279
- align-items: flex-end;
280
- gap: var(--ard-select-dropdown-add-custom-gap, 0.375rem);
281
- }
282
- .ard-select-dropdown-panel .ard-add-custom .ard-add-custom-label {
283
- font-size: var(--ard-select-dropdown-add-custom-label-font-size, 85%);
284
- }
285
- .ard-select-dropdown-panel > .ard-compact {
286
- font-size: var(--ard-select-dropdown-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
287
- }
288
-
289
- .ard-simple-spinner {
290
- border-radius: 999px;
291
- border: 0.5em solid var(--ard-spinner-color);
292
- border-top-color: transparent;
293
- animation: spinner-anim 1s linear infinite;
294
- position: relative;
295
- }
296
- .ard-simple-spinner::after {
297
- content: "";
298
- position: absolute;
299
- top: 50%;
300
- left: 50%;
301
- transform: translate(-50%, -50%);
302
- border-radius: 999px;
303
- border: 0.35em solid var(--ard-bg);
30
+ @layer ard-theme {
31
+ .ard-select {
32
+ box-sizing: border-box;
33
+ width: 100%;
34
+ min-height: var(--ard-select-height, var(--ard-form-field-height, 2.3125rem));
35
+ display: grid;
36
+ align-items: center;
37
+ grid-template-columns: 1fr max-content;
38
+ gap: var(--ard-select-gap, 0.625rem);
39
+ padding: var(--ard-select-padding, 0 1em 0 0.375em);
40
+ font-family: var(--ard-font-family);
41
+ font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
42
+ color: var(--ard-select-text-color, var(--ard-text, rgb(0, 0, 0)));
43
+ }
44
+ .ard-select ard-clear-button {
45
+ height: var(--ard-clear-button-size);
46
+ width: var(--ard-clear-button-size);
47
+ position: relative;
48
+ }
49
+ .ard-select .ard-clear-btn-wrapper {
50
+ cursor: pointer;
51
+ font-size: medium;
52
+ color: var(--ard-detail);
53
+ width: var(--ard-clear-button-size);
54
+ height: var(--ard-clear-button-size);
55
+ line-height: 1em;
56
+ border-radius: 999px;
57
+ border: none;
58
+ padding: 0;
59
+ background: transparent;
60
+ position: absolute;
61
+ left: 50%;
62
+ top: 50%;
63
+ transform: translate(-50%, -50%);
64
+ outline: none;
65
+ color: inherit;
66
+ }
67
+ .ard-select .ard-clear-btn-wrapper .ard-hitbox {
68
+ position: absolute;
69
+ left: -1px;
70
+ right: -1px;
71
+ top: -1px;
72
+ bottom: -1px;
73
+ }
74
+ .ard-select .ard-clear-btn-wrapper .ard-focus-overlay {
75
+ position: absolute;
76
+ top: calc(-1 * 1px);
77
+ bottom: calc(-1 * 1px);
78
+ left: calc(-1 * 1px);
79
+ right: calc(-1 * 1px);
80
+ opacity: 0;
81
+ border-radius: inherit;
82
+ pointer-events: none;
83
+ transition: opacity 0.2s ease;
84
+ background: currentColor;
85
+ }
86
+ .ard-select .ard-clear-btn-wrapper .ard-clear-btn {
87
+ position: absolute;
88
+ left: 50%;
89
+ top: 50%;
90
+ transform: translate(-50%, -50%);
91
+ }
92
+ .ard-select .ard-clear-btn-wrapper .ard-clear-btn::before {
93
+ content: "close";
94
+ font-family: "Material Symbols Outlined";
95
+ font-size: 1.5em;
96
+ font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
97
+ font-size: 70%;
98
+ }
99
+ .ard-select .ard-clear-btn-wrapper:hover .ard-focus-overlay {
100
+ opacity: 5%;
101
+ }
102
+ .ard-select .ard-clear-btn-wrapper:focus .ard-focus-overlay {
103
+ opacity: 8%;
104
+ }
105
+ .ard-select .ard-clear-btn-wrapper:active .ard-focus-overlay {
106
+ opacity: 15%;
107
+ }
108
+ .ard-select .ard-select-value-container {
109
+ position: relative;
110
+ height: 2em;
111
+ display: flex;
112
+ align-items: center;
113
+ font-size: var(--ard-select-font-size, var(--ard-form-field-font-size, 1rem));
114
+ text-size-adjust: 100%;
115
+ flex-grow: 1;
116
+ overflow: hidden;
117
+ }
118
+ .ard-select .ard-select-value-container .ard-placeholder {
119
+ font: inherit;
120
+ position: absolute;
121
+ color: var(--ard-select-placeholder-color, var(--ard-text3, rgba(0, 0, 0, 0.75)));
122
+ white-space: nowrap;
123
+ overflow: hidden;
124
+ text-overflow: ellipsis;
125
+ width: max-content;
126
+ max-width: 100%;
127
+ pointer-events: none;
128
+ }
129
+ .ard-select .ard-select-value-container .ard-search-input {
130
+ width: 100%;
131
+ max-width: 100%;
132
+ }
133
+ .ard-select .ard-select-value-container .ard-search-input input {
134
+ border: none;
135
+ background: transparent;
136
+ outline: none;
137
+ font: inherit;
138
+ padding-left: 1px;
139
+ display: block;
140
+ width: 100%;
141
+ max-width: 100%;
142
+ }
143
+ .ard-select .ard-select-controls {
144
+ display: flex;
145
+ align-items: center;
146
+ gap: var(--ard-select-controls-gap, 0.625rem);
147
+ width: max-content;
148
+ }
149
+ .ard-select.ard-singleselect .ard-value {
150
+ width: max-content;
151
+ white-space: nowrap;
152
+ }
153
+ .ard-select:not(.ard-searchable) .ard-search-input, .ard-select.ard-singleselect .ard-search-input {
154
+ position: absolute;
155
+ top: 50%;
156
+ left: 0;
157
+ transform: translateY(-50%) translateX(-1px);
158
+ width: max-content;
159
+ }
160
+ .ard-select:not(.ard-searchable) .ard-search-input input, .ard-select.ard-singleselect .ard-search-input input {
161
+ width: max-content;
162
+ }
163
+ .ard-select:not(.ard-searchable) .ard-search-input {
164
+ pointer-events: none;
165
+ }
166
+ .ard-select.ard-multiselect {
167
+ height: max-content;
168
+ }
169
+ .ard-select.ard-multiselect .ard-select-value-container {
170
+ height: max-content;
171
+ min-height: 1.5625em;
172
+ padding: var(--ard-select-multiselect-padding, 0.25em 0);
173
+ box-sizing: border-box;
174
+ flex-wrap: wrap;
175
+ gap: var(--ard-select-multiselect-chip-gap, 0.375rem);
176
+ justify-content: stretch;
177
+ }
178
+ .ard-select.ard-multiselect .ard-select-value-container .ard-chip-wrapper {
179
+ margin: 0;
180
+ }
181
+ .ard-select.ard-multiselect .ard-search-input {
182
+ flex-grow: 1;
183
+ width: unset !important;
184
+ min-width: var(--ard-select-search-min-width, 10ch);
185
+ }
186
+ .ard-select.ard-multiselect .ard-search-input input {
187
+ width: var(--ard-select-search-min-width, 10ch) !important;
188
+ }
189
+ .ard-select.ard-multiselect .ard-chip-wrapper {
190
+ margin: 0;
191
+ }
192
+ .ard-select .ard-dropdown-arrow-wrapper {
193
+ display: flex;
194
+ align-items: center;
195
+ height: max-content;
196
+ width: max-content;
197
+ background-color: transparent;
198
+ border: none;
199
+ cursor: pointer;
200
+ transition: transform var(--ard-select-dropdown-arrow-transition, 0.2s ease-in-out);
201
+ }
202
+ .ard-select .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
203
+ border: calc(var(--ard-dropdown-button-size) / 2) solid transparent;
204
+ position: relative;
205
+ border-bottom-color: var(--ard-select-dropdown-arrow-color, var(--ard-detail));
206
+ border-right-color: var(--ard-select-dropdown-arrow-color, var(--ard-detail));
207
+ transform: rotate(45deg) translate(-17.67771%, -17.67771%);
208
+ }
209
+ .ard-select.ard-dropdown-open .ard-dropdown-arrow-wrapper {
210
+ transform: var(--ard-select-dropdown-arrow-active-transform, rotate(180deg));
211
+ }
212
+ .ard-select.ard-compact {
213
+ font-size: var(--ard-select-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
214
+ min-height: var(--ard-select-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
215
+ padding: var(--ard-select-padding-compact, 0 0.625em 0 0.375em);
216
+ }
217
+ .ard-select.ard-compact .ard-select-controls {
218
+ gap: var(--ard-select-controls-gap-compact, 0.5rem);
219
+ }
220
+ .ard-select.ard-compact .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
221
+ border-width: calc(var(--ard-dropdown-button-size) / 2.4);
222
+ }
223
+ .ard-select-dropdown-panel {
224
+ right: 0;
225
+ width: var(--ard-select-dropdown-width, max-content);
226
+ max-width: var(--ard-select-dropdown-max-width, max(25em, 100%));
227
+ min-width: var(--ard-select-dropdown-min-width, 100%);
228
+ font-size: var(--ard-select-dropdown-font-size, var(--ard-form-field-font-size, 1rem));
229
+ }
230
+ .ard-select-dropdown-panel .ard-dropdown-panel-content {
231
+ padding: var(--ard-select-dropdown-padding, 0.375em 0.625em);
232
+ max-height: var(--ard-select-dropdown-max-height, 15em);
233
+ overflow: hidden auto;
234
+ }
235
+ .ard-select-dropdown-panel .ard-optgroup {
236
+ display: flex;
237
+ flex-direction: column;
238
+ cursor: pointer;
239
+ }
240
+ .ard-select-dropdown-panel .ard-optgroup-children {
241
+ cursor: default;
242
+ }
243
+ .ard-select-dropdown-panel .ard-optgroup-label {
244
+ font-size: var(--ard-select-dropdown-optgroup-label-font-size, 0.875em);
245
+ font-weight: var(--ard-select-dropdown-optgroup-label-font-weight, 600);
246
+ letter-spacing: 0.25px;
247
+ padding: var(--ard-select-dropdown-optgroup-label-padding, 0.375em 0.625em 0.0625em 0.625em);
248
+ }
249
+ .ard-select-dropdown-panel .ard-option {
250
+ padding: var(--ard-select-dropdown-option-padding, 0.375em 0.625em);
251
+ color: var(--ard-select-dropdown-option-text-color, var(--ard-text2, rgba(0, 0, 0, 0.87)));
252
+ cursor: pointer;
253
+ }
254
+ .ard-select-dropdown-panel .ard-option.ard-option-highlighted {
255
+ background: var(--ard-select-dropdown-option-highlighted-bg, var(--ard-darken-overlay-light));
256
+ }
257
+ .ard-select-dropdown-panel .ard-option.ard-option-selected {
258
+ font-weight: var(--ard-select-dropdown-option-selected-font-weight, 500);
259
+ background: var(--ard-select-dropdown-option-selected-bg, var(--ard-darken-overlay-medium));
260
+ }
261
+ .ard-select-dropdown-panel .ard-option.ard-option-selected.ard-option-highlighted {
262
+ background: var(--ard-select-dropdown-option-selected-highlighted-bg, var(--ard-darken-overlay-medium-strong));
263
+ }
264
+ .ard-select-dropdown-panel .ard-option.ard-option-disabled {
265
+ pointer-events: none;
266
+ opacity: var(--ard-select-dropdown-option-disabled-opacity, 50%);
267
+ }
268
+ .ard-select-dropdown-panel hr.ard-divider {
269
+ width: calc(100% - 1.25em);
270
+ margin: 0.375em 0.625em;
271
+ border: none;
272
+ border-bottom: 1px solid var(--ard-darken-overlay-strong);
273
+ }
274
+ .ard-select-dropdown-panel .ard-optgroup:first-child > hr.ard-divider {
275
+ display: none;
276
+ }
277
+ .ard-select-dropdown-panel .ard-add-custom {
278
+ display: flex;
279
+ align-items: flex-end;
280
+ gap: var(--ard-select-dropdown-add-custom-gap, 0.375rem);
281
+ }
282
+ .ard-select-dropdown-panel .ard-add-custom .ard-add-custom-label {
283
+ font-size: var(--ard-select-dropdown-add-custom-label-font-size, 85%);
284
+ }
285
+ .ard-select-dropdown-panel > .ard-compact {
286
+ font-size: var(--ard-select-dropdown-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
287
+ }
288
+ .ard-simple-spinner {
289
+ border-radius: 999px;
290
+ border: 0.5em solid var(--ard-spinner-color);
291
+ border-top-color: transparent;
292
+ animation: spinner-anim 1s linear infinite;
293
+ position: relative;
294
+ }
295
+ .ard-simple-spinner::after {
296
+ content: "";
297
+ position: absolute;
298
+ top: 50%;
299
+ left: 50%;
300
+ transform: translate(-50%, -50%);
301
+ border-radius: 999px;
302
+ border: 0.35em solid var(--ard-bg);
303
+ }
304
304
  }
305
-
306
305
  @keyframes spinner-anim {
307
306
  0% {
308
307
  transform: rotate(0deg);
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/select.scss","../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAMA;EAGE;EACA;EACA;EACA;EACA;EACA;EAMA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAGA;EAGA;EAEA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC7DA;EACE,QCmCgB;EDlChB,OCkCgB;EDjChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OC0BgB;EDzBhB,QCyBgB;EDxBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;ADEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIN;EACE;EACA;EACA;EACA;;AAIA;EACE;EACA;;AAKF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAIN;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAIF;EACE;;AAKJ;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAMN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAKJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"select.css"}
1
+ {"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/select.scss","../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAMA;EAGE;EACA;EACA;EACA;EACA;EACA;EAMA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EACA;EACA;EAEA;EAGA;EAGA;EAEA;EACA;;;AAGF;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EC9DF;IACE,QCmCgB;IDlChB,OCkCgB;IDjChB;;EAGF;IACE;IACA;IACA,OCGK;IDFL,OC0BgB;IDzBhB,QCyBgB;IDxBhB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;EAGF;IEvBF;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IAEA;IFgBI;;EAGF;IACE;IACA;IACA;IACA;;EAEA;IACE;IE7CN;IACA;IACA,yBACE;IF4CI;;EAKF;IACE;;EAKF;IACE;;EAKF;IACE;;EDGJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAIN;IACE;IACA;IACA;IACA;;EAIA;IACE;IACA;;EAKF;IACE;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAIN;IACE;;EAEF;IACE;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAGJ;IACE;IACA;IACA;;EAEA;IACE;;EAGJ;IACE;;EAIJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;;EAIF;IACE;;EAKJ;IACE;IACA;IACA;;EAEA;IACE;;EAEF;IACE;;EAMN;IACE;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAEF;IACE;IACA;IACA;;EAEF;IACE;;EAGF;IACE;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;;EAGF;IACE;IACA;;EAEA;IACE;;EAIJ;IACE;IACA;;EAIJ;IACE;IACA;IACA;IACA;;EAGF;IACE;;EAGF;IACE;IACA;IACA;;EAEA;IACE;;EAKJ;IACE;;EAKJ;IACE;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;IACA;;;AAKN;EACE;IACE;;EAGF;IACE","file":"select.css"}