cax-design-system 3.0.1 → 3.0.2

package/resources/components/slider/slider.scss

@@ -5,6 +5,7 @@
 
     .cax-slider .cax-slider-handle {
         position: absolute;
+        z-index: 3;
         cursor: grab;
         touch-action: none;
         display: block;
@@ -12,6 +13,7 @@
 
     .cax-slider-range {
         position: absolute;
+        z-index: 2;
         display: block;
     }
 
@@ -38,4 +40,43 @@
         left: 0;
         width: 100%;
     }
+
+    /* Steps structural styles */
+    .cax-slider-steps {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 100%;
+        height: 0;
+        pointer-events: none;
+    }
+
+    .cax-slider-step-indicator {
+        position: absolute;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        width: 4px;
+        height: 16px;
+        border-radius: 4px;
+        cursor: pointer;
+        pointer-events: auto;
+        z-index: 1;
+    }
+
+    .cax-slider-vertical {
+        .cax-slider-steps {
+            top: 0;
+            left: 50%;
+            height: 100%;
+            width: 0;
+        }
+
+        .cax-slider-step-indicator {
+            left: 50%;
+            top: auto;
+            transform: translate(-50%, 50%);
+            width: 24px;
+            height: 8px;
+        }
+    }
 }

package/resources/components/table/table.scss

@@ -62,7 +62,7 @@
     .cax-datatable-scrollable-table > .cax-datatable-thead {
         position: sticky;
         top: 0;
-        z-index: 2;
+        z-index: 30;
     }
 
     .cax-datatable-scrollable-table > .cax-datatable-frozen-tbody {
@@ -82,8 +82,8 @@
     }
 
     .cax-datatable-scrollable th.cax-frozen-column {
-        z-index: 20;
-        background: var(--neutral-75);
+        z-index: 31;
+        background: var(--neutral-50);
     }
 
     .cax-datatable-scrollable td.cax-frozen-column {

package/slider/index.d.ts

@@ -123,6 +123,11 @@ declare class Slider implements OnDestroy, ControlValueAccessor {
      * @group Props
      */
     autofocus: boolean | undefined;
+    /**
+     * Whether to show indicators at each step.
+     * @group Props
+     */
+    showSteps: boolean;
     /**
      * Callback to invoke on value change.
      * @param {SliderChangeEvent} event - Custom value change event.
@@ -192,11 +197,14 @@ declare class Slider implements OnDestroy, ControlValueAccessor {
     getValueFromHandle(handleValue: number): number;
     getDecimalsCount(value: number): number;
     getNormalizedValue(val: number): number;
+    get steps(): any[];
+    isStepActive(stepValue: number): boolean;
+    onStepClick(event: Event, stepValue: number): void;
     ngOnDestroy(): void;
     get minVal(): number;
     get maxVal(): number;
     static ɵfac: i0.ɵɵFactoryDeclaration<Slider, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<Slider, "cax-slider", never, { "animate": { "alias": "animate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "step": { "alias": "step"; "required": false; }; "range": { "alias": "range"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; }, { "onChange": "onChange"; "onSlideEnd": "onSlideEnd"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Slider, "cax-slider", never, { "animate": { "alias": "animate"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "step": { "alias": "step"; "required": false; }; "range": { "alias": "range"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "showSteps": { "alias": "showSteps"; "required": false; }; }, { "onChange": "onChange"; "onSlideEnd": "onSlideEnd"; }, never, never, false, never>;
     static ngAcceptInputType_animate: unknown;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_min: unknown;
@@ -205,6 +213,7 @@ declare class Slider implements OnDestroy, ControlValueAccessor {
     static ngAcceptInputType_range: unknown;
     static ngAcceptInputType_tabindex: unknown;
     static ngAcceptInputType_autofocus: unknown;
+    static ngAcceptInputType_showSteps: unknown;
 }
 
 declare class SliderModule {