primeng 19.1.3 → 20.0.0-beta.1

package/fesm2022/primeng-slider.mjs

@@ -1,111 +1,28 @@
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Injectable, forwardRef, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { Injectable, forwardRef, EventEmitter, inject, NgZone, booleanAttribute, numberAttribute, HostListener, ViewChild, Output, Input, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { removeClass, addClass, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils';
 import { SharedModule } from 'primeng/api';
 import { AutoFocus } from 'primeng/autofocus';
-import { BaseComponent } from 'primeng/basecomponent';
+import { style } from '@primeuix/styles/slider';
 import { BaseStyle } from 'primeng/base';
+import { BaseEditableHolder } from 'primeng/baseeditableholder';
 
-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;
-    inset-inline-start: 0;
-    height: 100%;
-}
-
-.p-slider-horizontal .p-slider-handle {
-    top: 50%;
-    margin-top: calc(-1 * calc(${dt('slider.handle.height')} / 2));
-    margin-inline-start: 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 {
-    inset-inline-start: 50%;
-    margin-inline-start: 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;
-    inset-inline-start: 0;
-    width: 100%;
-}
-`;
 const inlineStyles = {
     handle: { position: 'absolute' },
     range: { position: 'absolute' }
 };
 const classes = {
-    root: ({ props }) => [
+    root: ({ instance }) => [
         'p-slider p-component',
         {
-            'p-disabled': props.disabled,
-            'p-slider-horizontal': props.orientation === 'horizontal',
-            'p-slider-vertical': props.orientation === 'vertical'
+            'p-disabled': instance.disabled(),
+            'p-invalid': instance.invalid(),
+            'p-slider-horizontal': instance.orientation === 'horizontal',
+            'p-slider-vertical': instance.orientation === 'vertical',
+            'p-slider-animate': instance.animate
         }
     ],
     range: 'p-slider-range',
@@ -113,13 +30,13 @@ const classes = {
 };
 class SliderStyle extends BaseStyle {
     name = 'slider';
-    theme = theme;
+    theme = style;
     classes = classes;
     inlineStyles = inlineStyles;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SliderStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SliderStyle });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderStyle, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderStyle });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SliderStyle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderStyle, decorators: [{
             type: Injectable
         }] });
 /**
@@ -156,17 +73,12 @@ const SLIDER_VALUE_ACCESSOR = {
  * Slider is a component to provide input with a drag handle.
  * @group Components
  */
-class Slider extends BaseComponent {
+class Slider extends BaseEditableHolder {
     /**
      * When enabled, displays an animation on click of the slider bar.
      * @group Props
      */
     animate;
-    /**
-     * When present, it specifies that the element should be disabled.
-     * @group Props
-     */
-    disabled;
     /**
      * Mininum boundary value.
      * @group Props
@@ -192,13 +104,9 @@ class Slider extends BaseComponent {
      * @group Props
      */
     range;
-    /**
-     * Inline style of the component.
-     * @group Props
-     */
-    style;
     /**
      * Style class of the component.
+     * @deprecated since v20.0.0, use `class` instead.
      * @group Props
      */
     styleClass;
@@ -260,8 +168,11 @@ class Slider extends BaseComponent {
     startx;
     starty;
     ngZone = inject(NgZone);
+    onHostClick(event) {
+        this.onBarClick(event);
+    }
     onMouseDown(event, index) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         this.dragging = true;
@@ -277,11 +188,11 @@ class Slider extends BaseComponent {
         event.target.focus();
         event.preventDefault();
         if (this.animate) {
-            removeClass(this.el.nativeElement.children[0], 'p-slider-animate');
+            removeClass(this.el.nativeElement, 'p-slider-animate');
         }
     }
     onDragStart(event, index) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         var touchobj = event.changedTouches[0];
@@ -295,19 +206,19 @@ class Slider extends BaseComponent {
         }
         if (this.orientation === 'horizontal') {
             this.startx = parseInt(touchobj.clientX, 10);
-            this.barWidth = this.el.nativeElement.children[0].offsetWidth;
+            this.barWidth = this.el.nativeElement.offsetWidth;
         }
         else {
             this.starty = parseInt(touchobj.clientY, 10);
-            this.barHeight = this.el.nativeElement.children[0].offsetHeight;
+            this.barHeight = this.el.nativeElement.offsetHeight;
         }
         if (this.animate) {
-            removeClass(this.el.nativeElement.children[0], 'p-slider-animate');
+            removeClass(this.el.nativeElement, 'p-slider-animate');
         }
         event.preventDefault();
     }
     onDrag(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         var touchobj = event.changedTouches[0], handleValue = 0;
@@ -321,7 +232,7 @@ class Slider extends BaseComponent {
         event.preventDefault();
     }
     onDragEnd(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         this.dragging = false;
@@ -330,12 +241,12 @@ class Slider extends BaseComponent {
         else
             this.onSlideEnd.emit({ originalEvent: event, value: this.value });
         if (this.animate) {
-            addClass(this.el.nativeElement.children[0], 'p-slider-animate');
+            addClass(this.el.nativeElement, 'p-slider-animate');
         }
         event.preventDefault();
     }
     onBarClick(event) {
-        if (this.disabled) {
+        if (this.disabled()) {
             return;
         }
         if (!this.sliderHandleClick) {
@@ -446,7 +357,7 @@ class Slider extends BaseComponent {
                                 else
                                     this.onSlideEnd.emit({ originalEvent: event, value: this.value });
                                 if (this.animate) {
-                                    addClass(this.el.nativeElement.children[0], 'p-slider-animate');
+                                    addClass(this.el.nativeElement, 'p-slider-animate');
                                 }
                             });
                         }
@@ -515,10 +426,6 @@ class Slider extends BaseComponent {
     registerOnTouched(fn) {
         this.onModelTouched = fn;
     }
-    setDisabledState(val) {
-        this.disabled = val;
-        this.cd.markForCheck();
-    }
     get rangeStartLeft() {
         if (!this.isVertical())
             return this.handleValues[0] > 100 ? 100 + '%' : this.handleValues[0] + '%';
@@ -537,11 +444,11 @@ class Slider extends BaseComponent {
         return this.orientation === 'vertical';
     }
     updateDomData() {
-        let rect = this.el.nativeElement.children[0].getBoundingClientRect();
+        let rect = this.el.nativeElement.getBoundingClientRect();
         this.initX = rect.left + getWindowScrollLeft();
         this.initY = rect.top + getWindowScrollTop();
-        this.barWidth = this.el.nativeElement.children[0].offsetWidth;
-        this.barHeight = this.el.nativeElement.children[0].offsetHeight;
+        this.barWidth = this.el.nativeElement.offsetWidth;
+        this.barHeight = this.el.nativeElement.offsetHeight;
     }
     calculateHandleValue(event) {
         if (this.orientation === 'horizontal') {
@@ -668,244 +575,212 @@ class Slider extends BaseComponent {
     get maxVal() {
         return Math.max(this.values[1], this.values[0]);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.10", type: Slider, isStandalone: true, selector: "p-slider", inputs: { animate: ["animate", "animate", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], orientation: "orientation", step: ["step", "step", numberAttribute], range: ["range", "range", booleanAttribute], style: "style", styleClass: "styleClass", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tabindex: ["tabindex", "tabindex", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange", onSlideEnd: "onSlideEnd" }, providers: [SLIDER_VALUE_ACCESSOR, SliderStyle], viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true }, { propertyName: "sliderHandleStart", first: true, predicate: ["sliderHandleStart"], descendants: true }, { propertyName: "sliderHandleEnd", first: true, predicate: ["sliderHandleEnd"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
-        <div
-            [ngStyle]="style"
-            [class]="styleClass"
-            [ngClass]="{
-                'p-slider p-component': true,
-                'p-disabled': disabled,
-                'p-slider-horizontal': orientation == 'horizontal',
-                'p-slider-vertical': orientation == 'vertical',
-                'p-slider-animate': animate
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.0.6", type: Slider, isStandalone: true, selector: "p-slider", inputs: { animate: ["animate", "animate", booleanAttribute], min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], orientation: "orientation", step: ["step", "step", numberAttribute], range: ["range", "range", booleanAttribute], styleClass: "styleClass", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", tabindex: ["tabindex", "tabindex", numberAttribute], autofocus: ["autofocus", "autofocus", booleanAttribute] }, outputs: { onChange: "onChange", onSlideEnd: "onSlideEnd" }, host: { listeners: { "click": "onHostClick($event)" }, properties: { "attr.data-pc-name": "'slider'", "attr.data-pc-section": "'root'", "class": "cn(cx('root'), styleClass)" } }, providers: [SLIDER_VALUE_ACCESSOR, SliderStyle], viewQueries: [{ propertyName: "sliderHandle", first: true, predicate: ["sliderHandle"], descendants: true }, { propertyName: "sliderHandleStart", first: true, predicate: ["sliderHandleStart"], descendants: true }, { propertyName: "sliderHandleEnd", first: true, predicate: ["sliderHandleEnd"], descendants: true }], usesInheritance: true, ngImport: i0, template: `
+        <span
+            *ngIf="range && orientation == 'horizontal'"
+            [class]="cx('range')"
+            [ngStyle]="{
+                position: 'absolute',
+                'inset-inline-start': 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]="cx('range')"
+            [ngStyle]="{
+                position: 'absolute',
+                bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',
+                height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'
             }"
-            (click)="onBarClick($event)"
-            [attr.data-pc-name]="'slider'"
-            [attr.data-pc-section]="'root'"
-        >
-            <span
-                *ngIf="range && orientation == 'horizontal'"
-                class="p-slider-range"
-                [ngStyle]="{
-                    position: 'absolute',
-                    'inset-inline-start': 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]="{
-                    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]="{ 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]="{
-                    position: 'absolute',
-                    'inset-inline-start': orientation == 'horizontal' ? handleValue + '%' : null,
-                    bottom: orientation == 'vertical' ? handleValue + '%' : null
-                }"
-                (touchstart)="onDragStart($event)"
-                (touchmove)="onDrag($event)"
-                (touchend)="onDragEnd($event)"
-                (mousedown)="onMouseDown($event)"
-                (keydown)="onKeyDown($event)"
-                [attr.tabindex]="disabled ? null : tabindex"
-                role="slider"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuenow]="value"
-                [attr.aria-valuemax]="max"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-orientation]="orientation"
-                [attr.data-pc-section]="'handle'"
-                [pAutoFocus]="autofocus"
-            ></span>
-            <span
-                *ngIf="range"
-                #sliderHandleStart
-                [style.transition]="dragging ? 'none' : null"
-                class="p-slider-handle"
-                [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }"
-                [ngClass]="{ 'p-slider-handle-active': handleIndex == 0 }"
-                (keydown)="onKeyDown($event, 0)"
-                (mousedown)="onMouseDown($event, 0)"
-                (touchstart)="onDragStart($event, 0)"
-                (touchmove)="onDrag($event)"
-                (touchend)="onDragEnd($event)"
-                [attr.tabindex]="disabled ? null : tabindex"
-                role="slider"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuenow]="value ? value[0] : null"
-                [attr.aria-valuemax]="max"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-orientation]="orientation"
-                [attr.data-pc-section]="'startHandler'"
-                [pAutoFocus]="autofocus"
-            ></span>
-            <span
-                *ngIf="range"
-                #sliderHandleEnd
-                [style.transition]="dragging ? 'none' : null"
-                class="p-slider-handle"
-                [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }"
-                [ngClass]="{ 'p-slider-handle-active': handleIndex == 1 }"
-                (keydown)="onKeyDown($event, 1)"
-                (mousedown)="onMouseDown($event, 1)"
-                (touchstart)="onDragStart($event, 1)"
-                (touchmove)="onDrag($event)"
-                (touchend)="onDragEnd($event)"
-                [attr.tabindex]="disabled ? null : tabindex"
-                role="slider"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuenow]="value ? value[1] : null"
-                [attr.aria-valuemax]="max"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-orientation]="orientation"
-                [attr.data-pc-section]="'endHandler'"
-            ></span>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["autofocus", "pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+            [attr.data-pc-section]="'range'"
+        ></span>
+        <span *ngIf="!range && orientation == 'vertical'" [class]="cx('range')" [attr.data-pc-section]="'range'" [ngStyle]="{ position: 'absolute', height: handleValue + '%' }"></span>
+        <span *ngIf="!range && orientation == 'horizontal'" [class]="cx('range')" [attr.data-pc-section]="'range'" [ngStyle]="{ position: 'absolute', width: handleValue + '%' }"></span>
+        <span
+            *ngIf="!range"
+            #sliderHandle
+            [class]="cx('handle')"
+            [style.transition]="dragging ? 'none' : null"
+            [ngStyle]="{
+                position: 'absolute',
+                'inset-inline-start': orientation == 'horizontal' ? handleValue + '%' : null,
+                bottom: orientation == 'vertical' ? handleValue + '%' : null
+            }"
+            (touchstart)="onDragStart($event)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            (mousedown)="onMouseDown($event)"
+            (keydown)="onKeyDown($event)"
+            [attr.tabindex]="disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'handle'"
+            [pAutoFocus]="autofocus"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleStart
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 0 && 'p-slider-handle-active')"
+            [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }"
+            (keydown)="onKeyDown($event, 0)"
+            (mousedown)="onMouseDown($event, 0)"
+            (touchstart)="onDragStart($event, 0)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[0] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'startHandler'"
+            [pAutoFocus]="autofocus"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleEnd
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 1 && 'p-slider-handle-active')"
+            [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }"
+            (keydown)="onKeyDown($event, 1)"
+            (mousedown)="onMouseDown($event, 1)"
+            (touchstart)="onDragStart($event, 1)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[1] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'endHandler'"
+        ></span>
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: AutoFocus, selector: "[pAutoFocus]", inputs: ["pAutoFocus"] }, { kind: "ngmodule", type: SharedModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: Slider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: Slider, decorators: [{
             type: Component,
             args: [{
                     selector: 'p-slider',
                     standalone: true,
                     imports: [CommonModule, AutoFocus, SharedModule],
                     template: `
-        <div
-            [ngStyle]="style"
-            [class]="styleClass"
-            [ngClass]="{
-                'p-slider p-component': true,
-                'p-disabled': disabled,
-                'p-slider-horizontal': orientation == 'horizontal',
-                'p-slider-vertical': orientation == 'vertical',
-                'p-slider-animate': animate
+        <span
+            *ngIf="range && orientation == 'horizontal'"
+            [class]="cx('range')"
+            [ngStyle]="{
+                position: 'absolute',
+                'inset-inline-start': 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]="cx('range')"
+            [ngStyle]="{
+                position: 'absolute',
+                bottom: offset !== null && offset !== undefined ? offset + '%' : handleValues[0] + '%',
+                height: diff ? diff + '%' : handleValues[1] - handleValues[0] + '%'
             }"
-            (click)="onBarClick($event)"
-            [attr.data-pc-name]="'slider'"
-            [attr.data-pc-section]="'root'"
-        >
-            <span
-                *ngIf="range && orientation == 'horizontal'"
-                class="p-slider-range"
-                [ngStyle]="{
-                    position: 'absolute',
-                    'inset-inline-start': 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]="{
-                    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]="{ 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]="{
-                    position: 'absolute',
-                    'inset-inline-start': orientation == 'horizontal' ? handleValue + '%' : null,
-                    bottom: orientation == 'vertical' ? handleValue + '%' : null
-                }"
-                (touchstart)="onDragStart($event)"
-                (touchmove)="onDrag($event)"
-                (touchend)="onDragEnd($event)"
-                (mousedown)="onMouseDown($event)"
-                (keydown)="onKeyDown($event)"
-                [attr.tabindex]="disabled ? null : tabindex"
-                role="slider"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuenow]="value"
-                [attr.aria-valuemax]="max"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-orientation]="orientation"
-                [attr.data-pc-section]="'handle'"
-                [pAutoFocus]="autofocus"
-            ></span>
-            <span
-                *ngIf="range"
-                #sliderHandleStart
-                [style.transition]="dragging ? 'none' : null"
-                class="p-slider-handle"
-                [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }"
-                [ngClass]="{ 'p-slider-handle-active': handleIndex == 0 }"
-                (keydown)="onKeyDown($event, 0)"
-                (mousedown)="onMouseDown($event, 0)"
-                (touchstart)="onDragStart($event, 0)"
-                (touchmove)="onDrag($event)"
-                (touchend)="onDragEnd($event)"
-                [attr.tabindex]="disabled ? null : tabindex"
-                role="slider"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuenow]="value ? value[0] : null"
-                [attr.aria-valuemax]="max"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-orientation]="orientation"
-                [attr.data-pc-section]="'startHandler'"
-                [pAutoFocus]="autofocus"
-            ></span>
-            <span
-                *ngIf="range"
-                #sliderHandleEnd
-                [style.transition]="dragging ? 'none' : null"
-                class="p-slider-handle"
-                [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }"
-                [ngClass]="{ 'p-slider-handle-active': handleIndex == 1 }"
-                (keydown)="onKeyDown($event, 1)"
-                (mousedown)="onMouseDown($event, 1)"
-                (touchstart)="onDragStart($event, 1)"
-                (touchmove)="onDrag($event)"
-                (touchend)="onDragEnd($event)"
-                [attr.tabindex]="disabled ? null : tabindex"
-                role="slider"
-                [attr.aria-valuemin]="min"
-                [attr.aria-valuenow]="value ? value[1] : null"
-                [attr.aria-valuemax]="max"
-                [attr.aria-labelledby]="ariaLabelledBy"
-                [attr.aria-label]="ariaLabel"
-                [attr.aria-orientation]="orientation"
-                [attr.data-pc-section]="'endHandler'"
-            ></span>
-        </div>
+            [attr.data-pc-section]="'range'"
+        ></span>
+        <span *ngIf="!range && orientation == 'vertical'" [class]="cx('range')" [attr.data-pc-section]="'range'" [ngStyle]="{ position: 'absolute', height: handleValue + '%' }"></span>
+        <span *ngIf="!range && orientation == 'horizontal'" [class]="cx('range')" [attr.data-pc-section]="'range'" [ngStyle]="{ position: 'absolute', width: handleValue + '%' }"></span>
+        <span
+            *ngIf="!range"
+            #sliderHandle
+            [class]="cx('handle')"
+            [style.transition]="dragging ? 'none' : null"
+            [ngStyle]="{
+                position: 'absolute',
+                'inset-inline-start': orientation == 'horizontal' ? handleValue + '%' : null,
+                bottom: orientation == 'vertical' ? handleValue + '%' : null
+            }"
+            (touchstart)="onDragStart($event)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            (mousedown)="onMouseDown($event)"
+            (keydown)="onKeyDown($event)"
+            [attr.tabindex]="disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'handle'"
+            [pAutoFocus]="autofocus"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleStart
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 0 && 'p-slider-handle-active')"
+            [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeStartLeft, bottom: rangeStartBottom }"
+            (keydown)="onKeyDown($event, 0)"
+            (mousedown)="onMouseDown($event, 0)"
+            (touchstart)="onDragStart($event, 0)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[0] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'startHandler'"
+            [pAutoFocus]="autofocus"
+        ></span>
+        <span
+            *ngIf="range"
+            #sliderHandleEnd
+            [style.transition]="dragging ? 'none' : null"
+            [class]="cn(cx('handle'), handleIndex == 1 && 'p-slider-handle-active')"
+            [ngStyle]="{ position: 'absolute', 'inset-inline-start': rangeEndLeft, bottom: rangeEndBottom }"
+            (keydown)="onKeyDown($event, 1)"
+            (mousedown)="onMouseDown($event, 1)"
+            (touchstart)="onDragStart($event, 1)"
+            (touchmove)="onDrag($event)"
+            (touchend)="onDragEnd($event)"
+            [attr.tabindex]="disabled() ? null : tabindex"
+            role="slider"
+            [attr.aria-valuemin]="min"
+            [attr.aria-valuenow]="value ? value[1] : null"
+            [attr.aria-valuemax]="max"
+            [attr.aria-labelledby]="ariaLabelledBy"
+            [attr.aria-label]="ariaLabel"
+            [attr.aria-orientation]="orientation"
+            [attr.data-pc-section]="'endHandler'"
+        ></span>
     `,
                     providers: [SLIDER_VALUE_ACCESSOR, SliderStyle],
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    encapsulation: ViewEncapsulation.None
+                    encapsulation: ViewEncapsulation.None,
+                    host: {
+                        '[attr.data-pc-name]': "'slider'",
+                        '[attr.data-pc-section]': "'root'",
+                        '[class]': "cn(cx('root'), styleClass)"
+                    }
                 }]
         }], propDecorators: { animate: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
             }], min: [{
                 type: Input,
                 args: [{ transform: numberAttribute }]
@@ -920,8 +795,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], range: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
-            }], style: [{
-                type: Input
             }], styleClass: [{
                 type: Input
             }], ariaLabel: [{
@@ -947,13 +820,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
             }], sliderHandleEnd: [{
                 type: ViewChild,
                 args: ['sliderHandleEnd']
+            }], onHostClick: [{
+                type: HostListener,
+                args: ['click', ['$event']]
             }] } });
 class SliderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.10", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule], exports: [Slider, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.0.6", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule], exports: [Slider, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderModule, imports: [Slider, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SliderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SliderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [Slider, SharedModule],