Theming | Add slider

primefaces · Jul 29, 2024 · e6eb7e7 · e6eb7e7
1 parent 1ce8277
commit e6eb7e7
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 63 deletions.
diff --git a/src/app/components/slider/slider.css b/src/app/components/slider/slider.css
diff --git a/src/app/components/slider/slider.ts b/src/app/components/slider/slider.ts
@@ -17,13 +17,16 @@ import {
     ViewEncapsulation,
     booleanAttribute,
     forwardRef,
+    inject,
     numberAttribute
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DomHandler } from 'primeng/dom';
 import { Nullable, VoidListener } from 'primeng/ts-helpers';
 import { AutoFocusModule } from 'primeng/autofocus';
 import { SliderChangeEvent, SliderSlideEndEvent } from './slider.interface';
+import { SliderStyle } from './style/sliderstyle';
+import { BaseComponent } from 'primeng/basecomponent';
 
 export const SLIDER_VALUE_ACCESSOR: any = {
     provide: NG_VALUE_ACCESSOR,
@@ -48,23 +51,23 @@ export const SLIDER_VALUE_ACCESSOR: any = {
             <span
                 *ngIf="range && orientation == 'horizontal'"
                 class="p-slider-range"
-                [ngStyle]="{ left: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%', width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%' }"
+                [ngStyle]="{ position: 'absolute', left: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%', width: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%' }"
                 [attr.data-pc-section]="'range'"
             ></span>
             <span
                 *ngIf="range && orientation == 'vertical'"
                 class="p-slider-range"
-                [ngStyle]="{ bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%', height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%' }"
+                [ngStyle]="{ position: 'absolute', bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%', height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%' }"
                 [attr.data-pc-section]="'range'"
             ></span>
-            <span *ngIf="!range && orientation == 'vertical'" class="p-slider-range" [attr.data-pc-section]="'range'" [ngStyle]="{ height: handleValue + '%' }"></span>
-            <span *ngIf="!range && orientation == 'horizontal'" class="p-slider-range" [attr.data-pc-section]="'range'" [ngStyle]="{ width: handleValue + '%' }"></span>
+            <span *ngIf="!range && orientation == 'vertical'" class="p-slider-range" [attr.data-pc-section]="'range'" [ngStyle]="{ position: 'absolute', height: handleValue + '%' }"></span>
+            <span *ngIf="!range && orientation == 'horizontal'" class="p-slider-range" [attr.data-pc-section]="'range'" [ngStyle]="{ position: 'absolute', width: handleValue + '%' }"></span>
             <span
                 *ngIf="!range"
                 #sliderHandle
                 class="p-slider-handle"
                 [style.transition]="dragging ? 'none' : null"
-                [ngStyle]="{ left: orientation == 'horizontal' ? handleValue + '%' : null, bottom: orientation == 'vertical' ? handleValue + '%' : null }"
+                [ngStyle]="{ position: 'absolute', left: orientation == 'horizontal' ? handleValue + '%' : null, bottom: orientation == 'vertical' ? handleValue + '%' : null }"
                 (touchstart)="onDragStart($event)"
                 (touchmove)="onDrag($event)"
                 (touchend)="onDragEnd($event)"
@@ -87,7 +90,7 @@ export const SLIDER_VALUE_ACCESSOR: any = {
                 #sliderHandleStart
                 [style.transition]="dragging ? 'none' : null"
                 class="p-slider-handle"
-                [ngStyle]="{ left: rangeStartLeft, bottom: rangeStartBottom }"
+                [ngStyle]="{ position: 'absolute', left: rangeStartLeft, bottom: rangeStartBottom }"
                 [ngClass]="{ 'p-slider-handle-active': handleIndex == 0 }"
                 (keydown)="onKeyDown($event, 0)"
                 (mousedown)="onMouseDown($event, 0)"
@@ -111,7 +114,7 @@ export const SLIDER_VALUE_ACCESSOR: any = {
                 #sliderHandleEnd
                 [style.transition]="dragging ? 'none' : null"
                 class="p-slider-handle"
-                [ngStyle]="{ left: rangeEndLeft, bottom: rangeEndBottom }"
+                [ngStyle]="{ position: 'absolute', left: rangeEndLeft, bottom: rangeEndBottom }"
                 [ngClass]="{ 'p-slider-handle-active': handleIndex == 1 }"
                 (keydown)="onKeyDown($event, 1)"
                 (mousedown)="onMouseDown($event, 1)"
@@ -129,15 +132,11 @@ export const SLIDER_VALUE_ACCESSOR: any = {
             ></span>
         </div>
     `,
-    providers: [SLIDER_VALUE_ACCESSOR],
+    providers: [SLIDER_VALUE_ACCESSOR, SliderStyle],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    encapsulation: ViewEncapsulation.None,
-    styleUrls: ['./slider.css'],
-    host: {
-        class: 'p-element'
-    }
+    encapsulation: ViewEncapsulation.None
 })
-export class Slider implements OnDestroy, ControlValueAccessor {
+export class Slider extends BaseComponent implements OnDestroy, ControlValueAccessor {
     /**
      * When enabled, displays an animation on click of the slider bar.
      * @group Props
@@ -222,6 +221,8 @@ export class Slider implements OnDestroy, ControlValueAccessor {
 
     @ViewChild('sliderHandleEnd') sliderHandleEnd: Nullable<ElementRef>;
 
+    _componentStyle = inject(SliderStyle);
+
     public value: Nullable<number>;
 
     public values: Nullable<number[]>;
@@ -264,14 +265,7 @@ export class Slider implements OnDestroy, ControlValueAccessor {
 
     public starty: Nullable<number>;
 
-    constructor(
-        @Inject(DOCUMENT) private document: Document,
-        @Inject(PLATFORM_ID) private platformId: any,
-        public el: ElementRef,
-        public renderer: Renderer2,
-        private ngZone: NgZone,
-        public cd: ChangeDetectorRef
-    ) {}
+    private ngZone = inject(NgZone);
 
     onMouseDown(event: Event, index?: number) {
         if (this.disabled) {
@@ -699,6 +693,7 @@ export class Slider implements OnDestroy, ControlValueAccessor {
 
     ngOnDestroy() {
         this.unbindDragListeners();
+        super.ngOnDestroy();
     }
 
     get minVal() {

diff --git a/src/app/components/slider/style/sliderstyle.ts b/src/app/components/slider/style/sliderstyle.ts
@@ -0,0 +1,120 @@
+import { Injectable } from '@angular/core';
+import { BaseStyle } from 'primeng/base';
+
+const theme = ({ dt }) => `
+.p-slider {
+    position: relative;
+    background: ${dt('slider.track.background')};
+    border-radius: ${dt('slider.border.radius')};
+}
+
+.p-slider-handle {
+    cursor: grab;
+    touch-action: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: ${dt('slider.handle.height')};
+    width: ${dt('slider.handle.width')};
+    background: ${dt('slider.handle.background')};
+    border-radius: ${dt('slider.handle.border.radius')};
+    transition: background ${dt('slider.transition.duration')}, color ${dt('slider.transition.duration')}, border-color ${dt('slider.transition.duration')}, box-shadow ${dt('slider.transition.duration')}, outline-color ${dt(
+    'slider.transition.duration'
+)};
+    outline-color: transparent;
+}
+
+.p-slider-handle::before {
+    content: "";
+    width: ${dt('slider.handle.content.width')};
+    height: ${dt('slider.handle.content.height')};
+    display: block;
+    background: ${dt('slider.handle.content.background')};
+    border-radius: ${dt('slider.handle.content.border.radius')};
+    box-shadow: ${dt('slider.handle.content.shadow')};
+    transition: background ${dt('slider.transition.duration')};
+}
+
+.p-slider:not(.p-disabled) .p-slider-handle:hover {
+    background: ${dt('slider.handle.hover.background')};
+}
+
+.p-slider:not(.p-disabled) .p-slider-handle:hover::before {
+    background: ${dt('slider.handle.content.hover.background')};
+}
+
+.p-slider-handle:focus-visible {
+    border-color: ${dt('slider.handle.focus.border.color')};
+    box-shadow: ${dt('slider.handle.focus.ring.shadow')};
+    outline: ${dt('slider.handle.focus.ring.width')} ${dt('slider.handle.focus.ring.style')} ${dt('slider.handle.focus.ring.color')};
+    outline-offset: ${dt('slider.handle.focus.ring.offset')};
+}
+
+.p-slider-range {
+    display: block;
+    background: ${dt('slider.range.background')};
+    border-radius: ${dt('slider.border.radius')};
+}
+
+.p-slider.p-slider-horizontal {
+    height: ${dt('slider.track.size')};
+}
+
+.p-slider-horizontal .p-slider-range {
+    top: 0;
+    left: 0;
+    height: 100%;
+}
+
+.p-slider-horizontal .p-slider-handle {
+    top: 50%;
+    margin-top: calc(-1 * calc(${dt('slider.handle.height')} / 2));
+    margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
+}
+
+.p-slider-vertical {
+    min-height: 100px;
+    width: ${dt('slider.track.size')};
+}
+
+.p-slider-vertical .p-slider-handle {
+    left: 50%;
+    margin-left: calc(-1 * calc(${dt('slider.handle.width')} / 2));
+    margin-bottom: calc(-1 * calc(${dt('slider.handle.height')} / 2));
+}
+
+.p-slider-vertical .p-slider-range {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+}
+`;
+
+const inlineStyles = {
+    handle: { position: 'absolute' },
+    range: { position: 'absolute' }
+};
+
+const classes = {
+    root: ({ props }) => [
+        'p-slider p-component',
+        {
+            'p-disabled': props.disabled,
+            'p-slider-horizontal': props.orientation === 'horizontal',
+            'p-slider-vertical': props.orientation === 'vertical'
+        }
+    ],
+    range: 'p-slider-range',
+    handle: 'p-slider-handle'
+};
+
+@Injectable()
+export class SliderStyle extends BaseStyle {
+    name = 'slider';
+
+    theme = theme;
+
+    classes = classes;
+
+    inlineStyles = inlineStyles;
+}