@koalarx/ui 21.0.8 → 21.1.0

package/theme/form.css

@@ -36,12 +36,16 @@ button:focus {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.5rem 0 0;
-  color: var(--color-neutral-700);
-  font-size: 0.65rem;
+  padding: 0.2rem 0 0.5rem;
+  color: var(--color-neutral-500);
+  font-size: var(--text-sm);
   text-transform: uppercase;
 }
 
+.dark .hint-content {
+  color: var(--color-neutral-700);
+}
+
 kl-select .kl-select-container {
   position: relative;
   overflow: unset;
@@ -58,7 +62,6 @@ kl-select .kl-select-label {
   z-index: 1;
 }
 
-kl-select .has-value:has(selectedcontent > *) .kl-select-label,
 kl-select
   .has-value:has(.kl-select-content .selectcontent > *)
   .kl-select-label {
@@ -88,12 +91,6 @@ kl-select .has-value:focus .kl-select-label:after {
   height: 4px;
 }
 
-kl-select select,
-kl-select ::picker(select) {
-  appearance: base-select;
-}
-
-kl-select select,
 kl-select .kl-select-button {
   position: relative;
   justify-content: space-between;
@@ -108,10 +105,6 @@ kl-select .kl-select-button {
   transition: opacity 0.3s;
 }
 
-kl-select select::picker-icon {
-  display: none;
-}
-
 kl-select .picker {
   display: flex;
   justify-content: space-between;
@@ -122,7 +115,6 @@ kl-select .picker {
   color: var(--color-neutral-400);
 }
 
-kl-select select:open .picker,
 kl-select .kl-select-button:popover-open .picker {
   rotate: 180deg;
 }
@@ -131,7 +123,6 @@ kl-select .kl-select-options-container[popover] {
   display: none;
 }
 
-kl-select ::picker(select),
 kl-select .kl-select-options-container[popover] {
   position: relative;
   width: var(--select-width);
@@ -139,92 +130,57 @@ kl-select .kl-select-options-container[popover] {
   margin-block-start: 0.5rem;
   margin-block-end: 0.5rem;
   padding: 0;
-  background-color: var(--color-base-300);
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-md);
   border: 1px solid var(--color-neutral-600);
   transform: translateY(-1rem);
   opacity: 0;
   overflow: hidden;
-  transition: transform 0.3s ease allow-discrete,
-    opacity 0.3s ease allow-discrete, display 0.3s allow-discrete,
-    overlay 0.3s allow-discrete, height 0.3s allow-discrete;
+  transition:
+    transform 0.3s ease allow-discrete,
+    opacity 0.3s ease allow-discrete,
+    display 0.3s allow-discrete,
+    overlay 0.3s allow-discrete,
+    height 0.3s allow-discrete;
   position-area: var(--select-position-area, bottom);
 }
 
-kl-select ::picker(select):popover-open,
-kl-select .kl-select-options-container.with-popover:popover-open {
+kl-select .kl-select-options-container:popover-open {
   transform: translateY(0);
   opacity: 1;
   display: flex;
 }
 
-kl-select select {
-  anchor-name: --select-content;
-}
-
-kl-select select selectedcontent span:not(.not-animate) {
-  position: relative;
-  animation: 0.5s ease bounce;
-}
-
 @starting-style {
-  kl-select ::picker(select):popover-open,
-  kl-select .kl-select-options-container.with-popover:popover-open {
+  kl-select .kl-select-options-container:popover-open {
     transform: translateY(-1rem);
     opacity: 0;
   }
 }
 
-kl-select select option,
-kl-select .kl-select-options-container.with-popover .kl-select-option-content {
+kl-select .kl-select-option-content {
   display: flex;
   justify-content: space-between;
   padding: 0.25rem 0.5rem;
   border-radius: var(--radius-md);
-  color: var(--color-neutral-300);
   white-space: break-spaces;
+  transition: background-color 0.1s;
 }
 
-kl-select
-  .kl-select-options-container.with-popover
-  .kl-select-option-content
-  input {
+kl-select .kl-select-option-content input {
   -webkit-appearance: none;
   appearance: none;
 }
 
-kl-select select option:focus,
-kl-select
-  .kl-select-options-container.with-popover
-  .kl-select-option-content
-  input:focus {
-  background-color: rgba(63, 63, 63, 0.7);
-  outline: none;
-  transition: background-color 0.1s;
-}
-
-kl-select select option:checked,
-kl-select
-  .kl-select-options-container.with-popover
-  .kl-select-option-content:has(input:checked) {
-  background-color: rgba(63, 63, 63, 0.7);
+kl-select .kl-select-option-content:has(input:checked) {
   transition: background-color 0.1s;
 }
 
-kl-select select option::checkmark,
-kl-select
-  .kl-select-options-container.with-popover
-  .kl-select-option-content:has(input:checked):after {
+kl-select .kl-select-option-content:has(input:checked):after {
   content: "\f00c";
-  color: var(--color-neutral-500);
+  color: var(--color-success);
   font-family: "Font Awesome 6 Free";
   font-weight: 900;
   font-size: 1rem;
   margin-left: auto;
   order: 1;
 }
-
-kl-select .kl-select-options-container.with-popover label.active {
-  background-color: rgba(63, 63, 63, 0.7);
-  transition: background-color 0.1s;
-}

package/theme/snackbar.css

@@ -1,9 +1,23 @@
-idr-snackbar-content {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-}
-
 progress::-webkit-progress-value {
   transition: width 1s ease;
 }
+
+html[data-theme="light"] .alert-warning {
+  background: var(--color-yellow-500);
+  color: var(--color-neutral-800);
+}
+
+html[data-theme="light"] .alert-success {
+  background: var(--color-green-600);
+  color: var(--color-base-100);
+}
+
+html[data-theme="light"] .alert-error {
+  background: var(--color-red-700);
+  color: var(--color-base-100);
+}
+
+html[data-theme="light"] .alert-info {
+  background: var(--color-blue-500);
+  color: var(--color-base-100);
+}

package/types/koalarx-ui-shared-components-input-field-input-number.d.ts

@@ -0,0 +1,9 @@
+import { InputFieldBase } from '@koalarx/ui/shared/components/input-field';
+import * as i0 from '@angular/core';
+
+declare class InputNumber extends InputFieldBase {
+    static ɵfac: i0.ɵɵFactoryDeclaration<InputNumber, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InputNumber, "kl-input-number", never, {}, {}, never, ["[errors]"], true, never>;
+}
+
+export { InputNumber };

package/types/koalarx-ui-shared-components-input-field-range.d.ts

@@ -0,0 +1,26 @@
+import * as _angular_core from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+type RangeColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost';
+type RangeSize = 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
+declare class InputRange {
+    private destroyRef;
+    control: _angular_core.InputSignal<FormControl<any>>;
+    min: _angular_core.InputSignal<number>;
+    max: _angular_core.InputSignal<number>;
+    step: _angular_core.InputSignal<number>;
+    hint: _angular_core.InputSignal<string>;
+    color: _angular_core.InputSignal<RangeColor | undefined>;
+    size: _angular_core.InputSignal<RangeSize | undefined>;
+    colorClass: _angular_core.Signal<"range-neutral" | "range-primary" | "range-secondary" | "range-accent" | "range-info" | "range-success" | "range-warning" | "range-error" | "range-ghost" | "range">;
+    sizeClass: _angular_core.Signal<"" | "range-xs" | "range-sm" | "range-md" | "range-lg" | "range-xl">;
+    steps: _angular_core.Signal<number[]>;
+    value: _angular_core.WritableSignal<any>;
+    constructor();
+    setValue(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<InputRange, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputRange, "kl-input-range", never, { "control": { "alias": "control"; "required": true; "isSignal": true; }; "min": { "alias": "min"; "required": true; "isSignal": true; }; "max": { "alias": "max"; "required": true; "isSignal": true; }; "step": { "alias": "step"; "required": true; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { InputRange };
+export type { RangeColor, RangeSize };