ng-zorro-antd-slider.mjs 48 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171
  1. import { RIGHT_ARROW, UP_ARROW, LEFT_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes';
  2. import * as i0 from '@angular/core';
  3. import { Injectable, booleanAttribute, Input, ViewChild, ViewEncapsulation, ChangeDetectionStrategy, Component, numberAttribute, EventEmitter, forwardRef, Output, ViewChildren, NgModule } from '@angular/core';
  4. import { NG_VALUE_ACCESSOR } from '@angular/forms';
  5. import { Subject, fromEvent, merge } from 'rxjs';
  6. import { takeUntil, filter, tap, map, distinctUntilChanged } from 'rxjs/operators';
  7. import { numberAttributeWithZeroFallback, ensureNumberInRange, silentEvent, getPrecision, getPercent, getElementOffset, isNil, arraysEqual } from 'ng-zorro-antd/core/util';
  8. import * as i2 from 'ng-zorro-antd/tooltip';
  9. import { NzToolTipModule, NzTooltipDirective } from 'ng-zorro-antd/tooltip';
  10. import * as i2$1 from '@angular/cdk/platform';
  11. import * as i3 from '@angular/cdk/bidi';
  12. /**
  13. * Use of this source code is governed by an MIT-style license that can be
  14. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  15. */
  16. class NzSliderService {
  17. isDragging = false;
  18. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
  19. static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderService });
  20. }
  21. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderService, decorators: [{
  22. type: Injectable
  23. }] });
  24. class NzSliderHandleComponent {
  25. sliderService;
  26. cdr;
  27. handleEl;
  28. tooltip;
  29. vertical;
  30. reverse;
  31. offset;
  32. value;
  33. tooltipVisible = 'default';
  34. tooltipPlacement;
  35. tooltipFormatter;
  36. active = false;
  37. dir = 'ltr';
  38. tooltipTitle;
  39. style = {};
  40. constructor(sliderService, cdr) {
  41. this.sliderService = sliderService;
  42. this.cdr = cdr;
  43. }
  44. ngOnChanges(changes) {
  45. const { offset, value, active, tooltipVisible, reverse, dir } = changes;
  46. if (offset || reverse || dir) {
  47. this.updateStyle();
  48. }
  49. if (value) {
  50. this.updateTooltipTitle();
  51. this.updateTooltipPosition();
  52. }
  53. if (active) {
  54. if (active.currentValue) {
  55. this.toggleTooltip(true);
  56. }
  57. else {
  58. this.toggleTooltip(false);
  59. }
  60. }
  61. if (tooltipVisible?.currentValue === 'always') {
  62. Promise.resolve().then(() => this.toggleTooltip(true, true));
  63. }
  64. }
  65. enterHandle = () => {
  66. if (!this.sliderService.isDragging) {
  67. this.toggleTooltip(true);
  68. this.updateTooltipPosition();
  69. this.cdr.detectChanges();
  70. }
  71. };
  72. leaveHandle = () => {
  73. if (!this.sliderService.isDragging) {
  74. this.toggleTooltip(false);
  75. this.cdr.detectChanges();
  76. }
  77. };
  78. focus() {
  79. this.handleEl?.nativeElement.focus();
  80. }
  81. toggleTooltip(show, force = false) {
  82. if (!force && (this.tooltipVisible !== 'default' || !this.tooltip)) {
  83. return;
  84. }
  85. if (show) {
  86. this.tooltip?.show();
  87. }
  88. else {
  89. this.tooltip?.hide();
  90. }
  91. }
  92. updateTooltipTitle() {
  93. if (this.tooltipFormatter) {
  94. this.tooltipTitle =
  95. typeof this.tooltipFormatter === 'function' ? this.tooltipFormatter(this.value) : this.tooltipFormatter;
  96. }
  97. else {
  98. this.tooltipTitle = `${this.value}`;
  99. }
  100. }
  101. updateTooltipPosition() {
  102. if (this.tooltip) {
  103. Promise.resolve().then(() => this.tooltip?.updatePosition());
  104. }
  105. }
  106. updateStyle() {
  107. const vertical = this.vertical;
  108. const reverse = this.reverse;
  109. const offset = this.offset;
  110. const positionStyle = vertical
  111. ? {
  112. [reverse ? 'top' : 'bottom']: `${offset}%`,
  113. [reverse ? 'bottom' : 'top']: 'auto',
  114. transform: reverse ? null : `translateY(+50%)`
  115. }
  116. : {
  117. ...this.getHorizontalStylePosition(),
  118. transform: `translateX(${reverse ? (this.dir === 'rtl' ? '-' : '+') : this.dir === 'rtl' ? '+' : '-'}50%)`
  119. };
  120. this.style = positionStyle;
  121. this.cdr.markForCheck();
  122. }
  123. getHorizontalStylePosition() {
  124. let left = this.reverse ? 'auto' : `${this.offset}%`;
  125. let right = this.reverse ? `${this.offset}%` : 'auto';
  126. if (this.dir === 'rtl') {
  127. const tmp = left;
  128. left = right;
  129. right = tmp;
  130. }
  131. return { left, right };
  132. }
  133. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderHandleComponent, deps: [{ token: NzSliderService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
  134. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzSliderHandleComponent, isStandalone: true, selector: "nz-slider-handle", inputs: { vertical: ["vertical", "vertical", booleanAttribute], reverse: ["reverse", "reverse", booleanAttribute], offset: ["offset", "offset", numberAttributeWithZeroFallback], value: ["value", "value", numberAttributeWithZeroFallback], tooltipVisible: "tooltipVisible", tooltipPlacement: "tooltipPlacement", tooltipFormatter: "tooltipFormatter", active: ["active", "active", booleanAttribute], dir: "dir" }, host: { listeners: { "mouseenter": "enterHandle()", "mouseleave": "leaveHandle()" } }, viewQueries: [{ propertyName: "handleEl", first: true, predicate: ["handle"], descendants: true }, { propertyName: "tooltip", first: true, predicate: NzTooltipDirective, descendants: true }], exportAs: ["nzSliderHandle"], usesOnChanges: true, ngImport: i0, template: `
  135. <div
  136. #handle
  137. class="ant-slider-handle"
  138. tabindex="0"
  139. nz-tooltip
  140. [style]="style"
  141. [nzTooltipTitle]="tooltipFormatter === null || tooltipVisible === 'never' ? null : tooltipTitle"
  142. [nzTooltipTitleContext]="{ $implicit: value }"
  143. [nzTooltipTrigger]="null"
  144. [nzTooltipPlacement]="tooltipPlacement"
  145. ></div>
  146. `, isInline: true, dependencies: [{ kind: "ngmodule", type: NzToolTipModule }, { kind: "directive", type: i2.NzTooltipDirective, selector: "[nz-tooltip]", inputs: ["nzTooltipTitle", "nzTooltipTitleContext", "nz-tooltip", "nzTooltipTrigger", "nzTooltipPlacement", "nzTooltipOrigin", "nzTooltipVisible", "nzTooltipMouseEnterDelay", "nzTooltipMouseLeaveDelay", "nzTooltipOverlayClassName", "nzTooltipOverlayStyle", "nzTooltipArrowPointAtCenter", "cdkConnectedOverlayPush", "nzTooltipColor"], outputs: ["nzTooltipVisibleChange"], exportAs: ["nzTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  147. }
  148. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderHandleComponent, decorators: [{
  149. type: Component,
  150. args: [{
  151. changeDetection: ChangeDetectionStrategy.OnPush,
  152. encapsulation: ViewEncapsulation.None,
  153. selector: 'nz-slider-handle',
  154. exportAs: 'nzSliderHandle',
  155. preserveWhitespaces: false,
  156. template: `
  157. <div
  158. #handle
  159. class="ant-slider-handle"
  160. tabindex="0"
  161. nz-tooltip
  162. [style]="style"
  163. [nzTooltipTitle]="tooltipFormatter === null || tooltipVisible === 'never' ? null : tooltipTitle"
  164. [nzTooltipTitleContext]="{ $implicit: value }"
  165. [nzTooltipTrigger]="null"
  166. [nzTooltipPlacement]="tooltipPlacement"
  167. ></div>
  168. `,
  169. host: {
  170. '(mouseenter)': 'enterHandle()',
  171. '(mouseleave)': 'leaveHandle()'
  172. },
  173. imports: [NzToolTipModule]
  174. }]
  175. }], ctorParameters: () => [{ type: NzSliderService }, { type: i0.ChangeDetectorRef }], propDecorators: { handleEl: [{
  176. type: ViewChild,
  177. args: ['handle', { static: false }]
  178. }], tooltip: [{
  179. type: ViewChild,
  180. args: [NzTooltipDirective, { static: false }]
  181. }], vertical: [{
  182. type: Input,
  183. args: [{ transform: booleanAttribute }]
  184. }], reverse: [{
  185. type: Input,
  186. args: [{ transform: booleanAttribute }]
  187. }], offset: [{
  188. type: Input,
  189. args: [{ transform: numberAttributeWithZeroFallback }]
  190. }], value: [{
  191. type: Input,
  192. args: [{ transform: numberAttributeWithZeroFallback }]
  193. }], tooltipVisible: [{
  194. type: Input
  195. }], tooltipPlacement: [{
  196. type: Input
  197. }], tooltipFormatter: [{
  198. type: Input
  199. }], active: [{
  200. type: Input,
  201. args: [{ transform: booleanAttribute }]
  202. }], dir: [{
  203. type: Input
  204. }] } });
  205. /**
  206. * Use of this source code is governed by an MIT-style license that can be
  207. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  208. */
  209. class NzSliderMarksComponent {
  210. lowerBound = null;
  211. upperBound = null;
  212. marksArray = [];
  213. min;
  214. max;
  215. vertical = false;
  216. included = false;
  217. reverse;
  218. marks = [];
  219. ngOnChanges(changes) {
  220. const { marksArray, lowerBound, upperBound, reverse } = changes;
  221. if (marksArray || reverse) {
  222. this.buildMarks();
  223. }
  224. if (marksArray || lowerBound || upperBound || reverse) {
  225. this.togglePointActive();
  226. }
  227. }
  228. buildMarks() {
  229. const range = this.max - this.min;
  230. this.marks = this.marksArray.map(mark => {
  231. const { value, offset, config } = mark;
  232. const style = this.getMarkStyles(value, range, config);
  233. const label = isConfigObject(config) ? config.label : config;
  234. return {
  235. label,
  236. offset,
  237. style,
  238. value,
  239. config,
  240. active: false
  241. };
  242. });
  243. }
  244. getMarkStyles(value, range, config) {
  245. let style;
  246. const markValue = this.reverse ? this.max + this.min - value : value;
  247. if (this.vertical) {
  248. style = {
  249. marginBottom: '-50%',
  250. bottom: `${((markValue - this.min) / range) * 100}%`
  251. };
  252. }
  253. else {
  254. style = {
  255. transform: `translate3d(-50%, 0, 0)`,
  256. left: `${((markValue - this.min) / range) * 100}%`
  257. };
  258. }
  259. if (isConfigObject(config) && config.style) {
  260. style = { ...style, ...config.style };
  261. }
  262. return style;
  263. }
  264. togglePointActive() {
  265. if (this.marks && this.lowerBound !== null && this.upperBound !== null) {
  266. this.marks.forEach(mark => {
  267. const value = mark.value;
  268. const isActive = (!this.included && value === this.upperBound) ||
  269. (this.included && value <= this.upperBound && value >= this.lowerBound);
  270. mark.active = isActive;
  271. });
  272. }
  273. }
  274. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderMarksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  275. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSliderMarksComponent, isStandalone: true, selector: "nz-slider-marks", inputs: { lowerBound: "lowerBound", upperBound: "upperBound", marksArray: "marksArray", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], vertical: ["vertical", "vertical", booleanAttribute], included: ["included", "included", booleanAttribute], reverse: ["reverse", "reverse", booleanAttribute] }, host: { classAttribute: "ant-slider-mark" }, exportAs: ["nzSliderMarks"], usesOnChanges: true, ngImport: i0, template: `
  276. @for (attr of marks; track attr.value) {
  277. <span
  278. class="ant-slider-mark-text"
  279. [class.ant-slider-mark-active]="attr.active"
  280. [style]="attr.style"
  281. [innerHTML]="attr.label"
  282. ></span>
  283. }
  284. `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  285. }
  286. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderMarksComponent, decorators: [{
  287. type: Component,
  288. args: [{
  289. changeDetection: ChangeDetectionStrategy.OnPush,
  290. encapsulation: ViewEncapsulation.None,
  291. preserveWhitespaces: false,
  292. selector: 'nz-slider-marks',
  293. exportAs: 'nzSliderMarks',
  294. template: `
  295. @for (attr of marks; track attr.value) {
  296. <span
  297. class="ant-slider-mark-text"
  298. [class.ant-slider-mark-active]="attr.active"
  299. [style]="attr.style"
  300. [innerHTML]="attr.label"
  301. ></span>
  302. }
  303. `,
  304. host: {
  305. class: 'ant-slider-mark'
  306. }
  307. }]
  308. }], propDecorators: { lowerBound: [{
  309. type: Input
  310. }], upperBound: [{
  311. type: Input
  312. }], marksArray: [{
  313. type: Input
  314. }], min: [{
  315. type: Input,
  316. args: [{ transform: numberAttribute }]
  317. }], max: [{
  318. type: Input,
  319. args: [{ transform: numberAttribute }]
  320. }], vertical: [{
  321. type: Input,
  322. args: [{ transform: booleanAttribute }]
  323. }], included: [{
  324. type: Input,
  325. args: [{ transform: booleanAttribute }]
  326. }], reverse: [{
  327. type: Input,
  328. args: [{ transform: booleanAttribute }]
  329. }] } });
  330. function isConfigObject(config) {
  331. return typeof config !== 'string';
  332. }
  333. /**
  334. * Use of this source code is governed by an MIT-style license that can be
  335. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  336. */
  337. class NzSliderStepComponent {
  338. lowerBound = null;
  339. upperBound = null;
  340. marksArray = [];
  341. min;
  342. max;
  343. vertical = false;
  344. included = false;
  345. reverse;
  346. steps = [];
  347. ngOnChanges(changes) {
  348. const { marksArray, lowerBound, upperBound, reverse } = changes;
  349. if (marksArray || reverse) {
  350. this.buildSteps();
  351. }
  352. if (marksArray || lowerBound || upperBound || reverse) {
  353. this.togglePointActive();
  354. }
  355. }
  356. buildSteps() {
  357. const orient = this.vertical ? 'bottom' : 'left';
  358. this.steps = this.marksArray.map(mark => {
  359. const { value, config } = mark;
  360. let offset = mark.offset;
  361. const range = this.max - this.min;
  362. if (this.reverse) {
  363. offset = ((this.max - value) / range) * 100;
  364. }
  365. return {
  366. value,
  367. offset,
  368. config,
  369. active: false,
  370. style: {
  371. [orient]: `${offset}%`,
  372. transform: this.vertical ? 'translateY(50%)' : 'translateX(-50%)'
  373. }
  374. };
  375. });
  376. }
  377. togglePointActive() {
  378. if (this.steps && this.lowerBound !== null && this.upperBound !== null) {
  379. this.steps.forEach(step => {
  380. const value = step.value;
  381. const isActive = (!this.included && value === this.upperBound) ||
  382. (this.included && value <= this.upperBound && value >= this.lowerBound);
  383. step.active = isActive;
  384. });
  385. }
  386. }
  387. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  388. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSliderStepComponent, isStandalone: true, selector: "nz-slider-step", inputs: { lowerBound: "lowerBound", upperBound: "upperBound", marksArray: "marksArray", min: ["min", "min", numberAttribute], max: ["max", "max", numberAttribute], vertical: ["vertical", "vertical", booleanAttribute], included: ["included", "included", booleanAttribute], reverse: ["reverse", "reverse", booleanAttribute] }, host: { classAttribute: "ant-slider-step" }, exportAs: ["nzSliderStep"], usesOnChanges: true, ngImport: i0, template: `
  389. @for (step of steps; track step.value) {
  390. <span class="ant-slider-dot" [class.ant-slider-dot-active]="step.active" [style]="step.style!"></span>
  391. }
  392. `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  393. }
  394. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderStepComponent, decorators: [{
  395. type: Component,
  396. args: [{
  397. changeDetection: ChangeDetectionStrategy.OnPush,
  398. encapsulation: ViewEncapsulation.None,
  399. selector: 'nz-slider-step',
  400. exportAs: 'nzSliderStep',
  401. preserveWhitespaces: false,
  402. template: `
  403. @for (step of steps; track step.value) {
  404. <span class="ant-slider-dot" [class.ant-slider-dot-active]="step.active" [style]="step.style!"></span>
  405. }
  406. `,
  407. host: {
  408. class: 'ant-slider-step'
  409. }
  410. }]
  411. }], propDecorators: { lowerBound: [{
  412. type: Input
  413. }], upperBound: [{
  414. type: Input
  415. }], marksArray: [{
  416. type: Input
  417. }], min: [{
  418. type: Input,
  419. args: [{ transform: numberAttribute }]
  420. }], max: [{
  421. type: Input,
  422. args: [{ transform: numberAttribute }]
  423. }], vertical: [{
  424. type: Input,
  425. args: [{ transform: booleanAttribute }]
  426. }], included: [{
  427. type: Input,
  428. args: [{ transform: booleanAttribute }]
  429. }], reverse: [{
  430. type: Input,
  431. args: [{ transform: booleanAttribute }]
  432. }] } });
  433. class NzSliderTrackComponent {
  434. offset = 0;
  435. reverse = false;
  436. dir = 'ltr';
  437. length = 0;
  438. vertical = false;
  439. included = false;
  440. style = {};
  441. ngOnChanges() {
  442. const vertical = this.vertical;
  443. const reverse = this.reverse;
  444. const visibility = this.included ? 'visible' : 'hidden';
  445. const offset = this.offset;
  446. const length = this.length;
  447. const positonStyle = vertical
  448. ? {
  449. [reverse ? 'top' : 'bottom']: `${offset}%`,
  450. [reverse ? 'bottom' : 'top']: 'auto',
  451. height: `${length}%`,
  452. visibility
  453. }
  454. : {
  455. ...this.getHorizontalStylePosition(),
  456. width: `${length}%`,
  457. visibility
  458. };
  459. this.style = positonStyle;
  460. }
  461. getHorizontalStylePosition() {
  462. let left = this.reverse ? 'auto' : `${this.offset}%`;
  463. let right = this.reverse ? `${this.offset}%` : 'auto';
  464. if (this.dir === 'rtl') {
  465. const tmp = left;
  466. left = right;
  467. right = tmp;
  468. }
  469. return { left, right };
  470. }
  471. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderTrackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
  472. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.2", type: NzSliderTrackComponent, isStandalone: true, selector: "nz-slider-track", inputs: { offset: ["offset", "offset", numberAttribute], reverse: ["reverse", "reverse", booleanAttribute], dir: "dir", length: ["length", "length", numberAttribute], vertical: ["vertical", "vertical", booleanAttribute], included: ["included", "included", booleanAttribute] }, exportAs: ["nzSliderTrack"], usesOnChanges: true, ngImport: i0, template: `<div class="ant-slider-track" [style]="style"></div>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  473. }
  474. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderTrackComponent, decorators: [{
  475. type: Component,
  476. args: [{
  477. selector: 'nz-slider-track',
  478. exportAs: 'nzSliderTrack',
  479. template: `<div class="ant-slider-track" [style]="style"></div>`,
  480. preserveWhitespaces: false,
  481. encapsulation: ViewEncapsulation.None,
  482. changeDetection: ChangeDetectionStrategy.OnPush
  483. }]
  484. }], propDecorators: { offset: [{
  485. type: Input,
  486. args: [{ transform: numberAttribute }]
  487. }], reverse: [{
  488. type: Input,
  489. args: [{ transform: booleanAttribute }]
  490. }], dir: [{
  491. type: Input
  492. }], length: [{
  493. type: Input,
  494. args: [{ transform: numberAttribute }]
  495. }], vertical: [{
  496. type: Input,
  497. args: [{ transform: booleanAttribute }]
  498. }], included: [{
  499. type: Input,
  500. args: [{ transform: booleanAttribute }]
  501. }] } });
  502. class NzSliderComponent {
  503. slider;
  504. sliderService;
  505. cdr;
  506. platform;
  507. directionality;
  508. handlerComponents;
  509. nzDisabled = false;
  510. nzDots = false;
  511. nzIncluded = true;
  512. nzRange = false;
  513. nzVertical = false;
  514. nzReverse = false;
  515. nzDefaultValue;
  516. nzMarks = null;
  517. nzMax = 100;
  518. nzMin = 0;
  519. nzStep = 1;
  520. nzTooltipVisible = 'default';
  521. nzTooltipPlacement = 'top';
  522. nzTipFormatter;
  523. nzOnAfterChange = new EventEmitter();
  524. value = null;
  525. cacheSliderStart = null;
  526. cacheSliderLength = null;
  527. activeValueIndex = undefined; // Current activated handle's index ONLY for range=true
  528. track = { offset: null, length: null }; // Track's offset and length
  529. handles = []; // Handles' offset
  530. marksArray = null; // "steps" in array type with more data & FILTER out the invalid mark
  531. bounds = { lower: null, upper: null }; // now for nz-slider-step
  532. dir = 'ltr';
  533. dragStart$;
  534. dragMove$;
  535. dragEnd$;
  536. dragStart_;
  537. dragMove_;
  538. dragEnd_;
  539. destroy$ = new Subject();
  540. isNzDisableFirstChange = true;
  541. constructor(slider, sliderService, cdr, platform, directionality) {
  542. this.slider = slider;
  543. this.sliderService = sliderService;
  544. this.cdr = cdr;
  545. this.platform = platform;
  546. this.directionality = directionality;
  547. }
  548. ngOnInit() {
  549. this.dir = this.directionality.value;
  550. this.directionality.change?.pipe(takeUntil(this.destroy$)).subscribe((direction) => {
  551. this.dir = direction;
  552. this.cdr.detectChanges();
  553. this.updateTrackAndHandles();
  554. this.onValueChange(this.getValue(true));
  555. });
  556. this.handles = generateHandlers(this.nzRange ? 2 : 1);
  557. this.marksArray = this.nzMarks ? this.generateMarkItems(this.nzMarks) : null;
  558. this.bindDraggingHandlers();
  559. this.toggleDragDisabled(this.nzDisabled);
  560. if (this.getValue() === null) {
  561. this.setValue(this.formatValue(null));
  562. }
  563. }
  564. ngOnChanges(changes) {
  565. const { nzDisabled, nzMarks, nzRange } = changes;
  566. if (nzDisabled && !nzDisabled.firstChange) {
  567. this.toggleDragDisabled(nzDisabled.currentValue);
  568. }
  569. else if (nzMarks && !nzMarks.firstChange) {
  570. this.marksArray = this.nzMarks ? this.generateMarkItems(this.nzMarks) : null;
  571. }
  572. else if (nzRange && !nzRange.firstChange) {
  573. this.handles = generateHandlers(nzRange.currentValue ? 2 : 1);
  574. this.setValue(this.formatValue(null));
  575. }
  576. }
  577. ngOnDestroy() {
  578. this.unsubscribeDrag();
  579. this.destroy$.next(true);
  580. this.destroy$.complete();
  581. }
  582. writeValue(val) {
  583. this.setValue(val, true);
  584. }
  585. onValueChange(_value) { }
  586. onTouched() { }
  587. registerOnChange(fn) {
  588. this.onValueChange = fn;
  589. }
  590. registerOnTouched(fn) {
  591. this.onTouched = fn;
  592. }
  593. setDisabledState(isDisabled) {
  594. this.nzDisabled = (this.isNzDisableFirstChange && this.nzDisabled) || isDisabled;
  595. this.isNzDisableFirstChange = false;
  596. this.toggleDragDisabled(this.nzDisabled);
  597. this.cdr.markForCheck();
  598. }
  599. /**
  600. * Event handler is only triggered when a slider handler is focused.
  601. */
  602. onKeyDown(e) {
  603. if (this.nzDisabled) {
  604. return;
  605. }
  606. const code = e.keyCode;
  607. const isIncrease = code === RIGHT_ARROW || code === UP_ARROW;
  608. const isDecrease = code === LEFT_ARROW || code === DOWN_ARROW;
  609. if (!(isIncrease || isDecrease)) {
  610. return;
  611. }
  612. e.preventDefault();
  613. let step = (isDecrease ? -this.nzStep : this.nzStep) * (this.nzReverse ? -1 : 1);
  614. step = this.dir === 'rtl' ? step * -1 : step;
  615. const newVal = this.nzRange
  616. ? this.value[this.activeValueIndex] + step
  617. : this.value + step;
  618. this.setActiveValue(ensureNumberInRange(newVal, this.nzMin, this.nzMax));
  619. this.nzOnAfterChange.emit(this.getValue(true));
  620. }
  621. onHandleFocusIn(index) {
  622. this.activeValueIndex = index;
  623. }
  624. setValue(value, isWriteValue = false) {
  625. if (isWriteValue) {
  626. this.value = this.formatValue(value);
  627. this.updateTrackAndHandles();
  628. }
  629. else if (!valuesEqual(this.value, value)) {
  630. this.value = value;
  631. this.updateTrackAndHandles();
  632. this.onValueChange(this.getValue(true));
  633. }
  634. }
  635. getValue(cloneAndSort = false) {
  636. if (cloneAndSort && this.value && isValueRange(this.value)) {
  637. return [...this.value].sort((a, b) => a - b);
  638. }
  639. return this.value;
  640. }
  641. /**
  642. * Clone & sort current value and convert them to offsets, then return the new one.
  643. */
  644. getValueToOffset(value) {
  645. let normalizedValue = value;
  646. if (typeof normalizedValue === 'undefined') {
  647. normalizedValue = this.getValue(true);
  648. }
  649. return isValueRange(normalizedValue)
  650. ? normalizedValue.map(val => this.valueToOffset(val))
  651. : this.valueToOffset(normalizedValue);
  652. }
  653. /**
  654. * Find the closest value to be activated.
  655. */
  656. setActiveValueIndex(pointerValue) {
  657. const value = this.getValue();
  658. if (isValueRange(value)) {
  659. let minimal = null;
  660. let gap;
  661. let activeIndex = -1;
  662. value.forEach((val, index) => {
  663. gap = Math.abs(pointerValue - val);
  664. if (minimal === null || gap < minimal) {
  665. minimal = gap;
  666. activeIndex = index;
  667. }
  668. });
  669. this.activeValueIndex = activeIndex;
  670. this.handlerComponents.toArray()[activeIndex].focus();
  671. }
  672. else {
  673. this.handlerComponents.toArray()[0].focus();
  674. }
  675. }
  676. setActiveValue(pointerValue) {
  677. if (isValueRange(this.value)) {
  678. const newValue = [...this.value];
  679. newValue[this.activeValueIndex] = pointerValue;
  680. this.setValue(newValue);
  681. }
  682. else {
  683. this.setValue(pointerValue);
  684. }
  685. }
  686. /**
  687. * Update track and handles' position and length.
  688. */
  689. updateTrackAndHandles() {
  690. const value = this.getValue();
  691. const offset = this.getValueToOffset(value);
  692. const valueSorted = this.getValue(true);
  693. const offsetSorted = this.getValueToOffset(valueSorted);
  694. const boundParts = isValueRange(valueSorted) ? valueSorted : [0, valueSorted];
  695. const trackParts = isValueRange(offsetSorted)
  696. ? [offsetSorted[0], offsetSorted[1] - offsetSorted[0]]
  697. : [0, offsetSorted];
  698. this.handles.forEach((handle, index) => {
  699. handle.offset = isValueRange(offset) ? offset[index] : offset;
  700. handle.value = isValueRange(value) ? value[index] : value || 0;
  701. });
  702. [this.bounds.lower, this.bounds.upper] = boundParts;
  703. [this.track.offset, this.track.length] = trackParts;
  704. this.cdr.markForCheck();
  705. }
  706. onDragStart(value) {
  707. this.toggleDragMoving(true);
  708. this.cacheSliderProperty();
  709. this.setActiveValueIndex(this.getLogicalValue(value));
  710. this.setActiveValue(this.getLogicalValue(value));
  711. this.showHandleTooltip(this.nzRange ? this.activeValueIndex : 0);
  712. }
  713. onDragMove(value) {
  714. this.setActiveValue(this.getLogicalValue(value));
  715. this.cdr.markForCheck();
  716. }
  717. getLogicalValue(value) {
  718. if (this.nzReverse) {
  719. if (!this.nzVertical && this.dir === 'rtl') {
  720. return value;
  721. }
  722. return this.nzMax - value + this.nzMin;
  723. }
  724. if (!this.nzVertical && this.dir === 'rtl') {
  725. return this.nzMax - value + this.nzMin;
  726. }
  727. return value;
  728. }
  729. onDragEnd() {
  730. this.nzOnAfterChange.emit(this.getValue(true));
  731. this.toggleDragMoving(false);
  732. this.cacheSliderProperty(true);
  733. this.hideAllHandleTooltip();
  734. this.cdr.markForCheck();
  735. }
  736. /**
  737. * Create user interactions handles.
  738. */
  739. bindDraggingHandlers() {
  740. if (!this.platform.isBrowser) {
  741. return;
  742. }
  743. const pluckFunc = keys => (event) => keys.reduce((acc, key) => acc[key] || acc, event);
  744. const sliderDOM = this.slider.nativeElement;
  745. const orientField = this.nzVertical ? 'pageY' : 'pageX';
  746. const mouse = {
  747. start: 'mousedown',
  748. move: 'mousemove',
  749. end: 'mouseup',
  750. pluckKey: [orientField]
  751. };
  752. const touch = {
  753. start: 'touchstart',
  754. move: 'touchmove',
  755. end: 'touchend',
  756. pluckKey: ['touches', '0', orientField],
  757. filter: (e) => e instanceof TouchEvent
  758. };
  759. [mouse, touch].forEach(source => {
  760. const { start, move, end, pluckKey, filter: filterFunc = () => true } = source;
  761. source.startPlucked$ = fromEvent(sliderDOM, start).pipe(filter(filterFunc), tap(silentEvent), map(pluckFunc(pluckKey)), map((position) => this.findClosestValue(position)));
  762. source.end$ = fromEvent(document, end);
  763. source.moveResolved$ = fromEvent(document, move).pipe(filter(filterFunc), tap(silentEvent), map(pluckFunc(pluckKey)), distinctUntilChanged(), map((position) => this.findClosestValue(position)), distinctUntilChanged(), takeUntil(source.end$));
  764. });
  765. this.dragStart$ = merge(mouse.startPlucked$, touch.startPlucked$);
  766. this.dragMove$ = merge(mouse.moveResolved$, touch.moveResolved$);
  767. this.dragEnd$ = merge(mouse.end$, touch.end$);
  768. }
  769. subscribeDrag(periods = ['start', 'move', 'end']) {
  770. if (periods.indexOf('start') !== -1 && this.dragStart$ && !this.dragStart_) {
  771. this.dragStart_ = this.dragStart$.subscribe(this.onDragStart.bind(this));
  772. }
  773. if (periods.indexOf('move') !== -1 && this.dragMove$ && !this.dragMove_) {
  774. this.dragMove_ = this.dragMove$.subscribe(this.onDragMove.bind(this));
  775. }
  776. if (periods.indexOf('end') !== -1 && this.dragEnd$ && !this.dragEnd_) {
  777. this.dragEnd_ = this.dragEnd$.subscribe(this.onDragEnd.bind(this));
  778. }
  779. }
  780. unsubscribeDrag(periods = ['start', 'move', 'end']) {
  781. if (periods.indexOf('start') !== -1 && this.dragStart_) {
  782. this.dragStart_.unsubscribe();
  783. this.dragStart_ = null;
  784. }
  785. if (periods.indexOf('move') !== -1 && this.dragMove_) {
  786. this.dragMove_.unsubscribe();
  787. this.dragMove_ = null;
  788. }
  789. if (periods.indexOf('end') !== -1 && this.dragEnd_) {
  790. this.dragEnd_.unsubscribe();
  791. this.dragEnd_ = null;
  792. }
  793. }
  794. toggleDragMoving(movable) {
  795. const periods = ['move', 'end'];
  796. if (movable) {
  797. this.sliderService.isDragging = true;
  798. this.subscribeDrag(periods);
  799. }
  800. else {
  801. this.sliderService.isDragging = false;
  802. this.unsubscribeDrag(periods);
  803. }
  804. }
  805. toggleDragDisabled(disabled) {
  806. if (disabled) {
  807. this.unsubscribeDrag();
  808. }
  809. else {
  810. this.subscribeDrag(['start']);
  811. }
  812. }
  813. findClosestValue(position) {
  814. const sliderStart = this.getSliderStartPosition();
  815. const sliderLength = this.getSliderLength();
  816. const ratio = ensureNumberInRange((position - sliderStart) / sliderLength, 0, 1);
  817. const val = (this.nzMax - this.nzMin) * (this.nzVertical ? 1 - ratio : ratio) + this.nzMin;
  818. const points = this.nzMarks === null
  819. ? []
  820. : Object.keys(this.nzMarks)
  821. .map(parseFloat)
  822. .sort((a, b) => a - b);
  823. if (this.nzStep !== 0 && !this.nzDots) {
  824. const closestOne = Math.round(val / this.nzStep) * this.nzStep;
  825. points.push(closestOne);
  826. }
  827. const gaps = points.map(point => Math.abs(val - point));
  828. const closest = points[gaps.indexOf(Math.min(...gaps))];
  829. // return parseFloat(closest.toFixed(getPrecision(this.nzStep)));
  830. return this.nzStep === 0 ? closest : parseFloat(closest.toFixed(getPrecision(this.nzStep)));
  831. }
  832. valueToOffset(value) {
  833. return getPercent(this.nzMin, this.nzMax, value);
  834. }
  835. getSliderStartPosition() {
  836. if (this.cacheSliderStart !== null) {
  837. return this.cacheSliderStart;
  838. }
  839. const offset = getElementOffset(this.slider.nativeElement);
  840. return this.nzVertical ? offset.top : offset.left;
  841. }
  842. getSliderLength() {
  843. if (this.cacheSliderLength !== null) {
  844. return this.cacheSliderLength;
  845. }
  846. const sliderDOM = this.slider.nativeElement;
  847. return this.nzVertical ? sliderDOM.clientHeight : sliderDOM.clientWidth;
  848. }
  849. /**
  850. * Cache DOM layout/reflow operations for performance (may not necessary?)
  851. */
  852. cacheSliderProperty(remove = false) {
  853. this.cacheSliderStart = remove ? null : this.getSliderStartPosition();
  854. this.cacheSliderLength = remove ? null : this.getSliderLength();
  855. }
  856. formatValue(value) {
  857. if (isNil(value)) {
  858. return this.nzRange ? [this.nzMin, this.nzMax] : this.nzMin;
  859. }
  860. else if (assertValueValid(value, this.nzRange)) {
  861. return isValueRange(value)
  862. ? value.map(val => ensureNumberInRange(val, this.nzMin, this.nzMax))
  863. : ensureNumberInRange(value, this.nzMin, this.nzMax);
  864. }
  865. else {
  866. return this.nzDefaultValue ? this.nzDefaultValue : this.nzRange ? [this.nzMin, this.nzMax] : this.nzMin;
  867. }
  868. }
  869. /**
  870. * Show one handle's tooltip and hide others'.
  871. */
  872. showHandleTooltip(handleIndex = 0) {
  873. this.handles.forEach((handle, index) => {
  874. handle.active = index === handleIndex;
  875. });
  876. }
  877. hideAllHandleTooltip() {
  878. this.handles.forEach(handle => (handle.active = false));
  879. }
  880. generateMarkItems(marks) {
  881. const marksArray = [];
  882. for (const key in marks) {
  883. if (marks.hasOwnProperty(key)) {
  884. const mark = marks[key];
  885. const val = typeof key === 'number' ? key : parseFloat(key);
  886. if (val >= this.nzMin && val <= this.nzMax) {
  887. marksArray.push({ value: val, offset: this.valueToOffset(val), config: mark });
  888. }
  889. }
  890. }
  891. return marksArray.length ? marksArray : null;
  892. }
  893. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderComponent, deps: [{ token: i0.ElementRef }, { token: NzSliderService }, { token: i0.ChangeDetectorRef }, { token: i2$1.Platform }, { token: i3.Directionality }], target: i0.ɵɵFactoryTarget.Component });
  894. static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.2", type: NzSliderComponent, isStandalone: true, selector: "nz-slider", inputs: { nzDisabled: ["nzDisabled", "nzDisabled", booleanAttribute], nzDots: ["nzDots", "nzDots", booleanAttribute], nzIncluded: ["nzIncluded", "nzIncluded", booleanAttribute], nzRange: ["nzRange", "nzRange", booleanAttribute], nzVertical: ["nzVertical", "nzVertical", booleanAttribute], nzReverse: ["nzReverse", "nzReverse", booleanAttribute], nzDefaultValue: "nzDefaultValue", nzMarks: "nzMarks", nzMax: ["nzMax", "nzMax", numberAttribute], nzMin: ["nzMin", "nzMin", numberAttribute], nzStep: ["nzStep", "nzStep", numberAttributeWithZeroFallback], nzTooltipVisible: "nzTooltipVisible", nzTooltipPlacement: "nzTooltipPlacement", nzTipFormatter: "nzTipFormatter" }, outputs: { nzOnAfterChange: "nzOnAfterChange" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.ant-slider-rtl": "dir === 'rtl'", "class.ant-slider-disabled": "nzDisabled", "class.ant-slider-vertical": "nzVertical", "class.ant-slider-with-marks": "marksArray" }, classAttribute: "ant-slider" }, providers: [
  895. {
  896. provide: NG_VALUE_ACCESSOR,
  897. useExisting: forwardRef(() => NzSliderComponent),
  898. multi: true
  899. },
  900. NzSliderService
  901. ], viewQueries: [{ propertyName: "handlerComponents", predicate: NzSliderHandleComponent, descendants: true }], exportAs: ["nzSlider"], usesOnChanges: true, ngImport: i0, template: `
  902. <div class="ant-slider-rail"></div>
  903. <nz-slider-track
  904. [vertical]="nzVertical"
  905. [included]="nzIncluded"
  906. [offset]="track.offset!"
  907. [length]="track.length!"
  908. [reverse]="nzReverse"
  909. [dir]="dir"
  910. ></nz-slider-track>
  911. @if (marksArray) {
  912. <nz-slider-step
  913. [vertical]="nzVertical"
  914. [min]="nzMin"
  915. [max]="nzMax"
  916. [lowerBound]="$any(bounds.lower)"
  917. [upperBound]="$any(bounds.upper)"
  918. [marksArray]="marksArray"
  919. [included]="nzIncluded"
  920. [reverse]="nzReverse"
  921. ></nz-slider-step>
  922. }
  923. @for (handle of handles; track handle.value; let handleIndex = $index) {
  924. <nz-slider-handle
  925. [vertical]="nzVertical"
  926. [reverse]="nzReverse"
  927. [offset]="handle.offset!"
  928. [value]="handle.value!"
  929. [active]="handle.active"
  930. [tooltipFormatter]="nzTipFormatter"
  931. [tooltipVisible]="nzTooltipVisible"
  932. [tooltipPlacement]="nzTooltipPlacement"
  933. [dir]="dir"
  934. (focusin)="onHandleFocusIn(handleIndex)"
  935. ></nz-slider-handle>
  936. }
  937. @if (marksArray) {
  938. <nz-slider-marks
  939. [vertical]="nzVertical"
  940. [min]="nzMin"
  941. [max]="nzMax"
  942. [lowerBound]="$any(bounds.lower)"
  943. [upperBound]="$any(bounds.upper)"
  944. [marksArray]="marksArray"
  945. [included]="nzIncluded"
  946. [reverse]="nzReverse"
  947. ></nz-slider-marks>
  948. }
  949. `, isInline: true, dependencies: [{ kind: "component", type: NzSliderTrackComponent, selector: "nz-slider-track", inputs: ["offset", "reverse", "dir", "length", "vertical", "included"], exportAs: ["nzSliderTrack"] }, { kind: "component", type: NzSliderStepComponent, selector: "nz-slider-step", inputs: ["lowerBound", "upperBound", "marksArray", "min", "max", "vertical", "included", "reverse"], exportAs: ["nzSliderStep"] }, { kind: "component", type: NzSliderHandleComponent, selector: "nz-slider-handle", inputs: ["vertical", "reverse", "offset", "value", "tooltipVisible", "tooltipPlacement", "tooltipFormatter", "active", "dir"], exportAs: ["nzSliderHandle"] }, { kind: "component", type: NzSliderMarksComponent, selector: "nz-slider-marks", inputs: ["lowerBound", "upperBound", "marksArray", "min", "max", "vertical", "included", "reverse"], exportAs: ["nzSliderMarks"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
  950. }
  951. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderComponent, decorators: [{
  952. type: Component,
  953. args: [{
  954. changeDetection: ChangeDetectionStrategy.OnPush,
  955. encapsulation: ViewEncapsulation.None,
  956. selector: 'nz-slider',
  957. exportAs: 'nzSlider',
  958. preserveWhitespaces: false,
  959. providers: [
  960. {
  961. provide: NG_VALUE_ACCESSOR,
  962. useExisting: forwardRef(() => NzSliderComponent),
  963. multi: true
  964. },
  965. NzSliderService
  966. ],
  967. template: `
  968. <div class="ant-slider-rail"></div>
  969. <nz-slider-track
  970. [vertical]="nzVertical"
  971. [included]="nzIncluded"
  972. [offset]="track.offset!"
  973. [length]="track.length!"
  974. [reverse]="nzReverse"
  975. [dir]="dir"
  976. ></nz-slider-track>
  977. @if (marksArray) {
  978. <nz-slider-step
  979. [vertical]="nzVertical"
  980. [min]="nzMin"
  981. [max]="nzMax"
  982. [lowerBound]="$any(bounds.lower)"
  983. [upperBound]="$any(bounds.upper)"
  984. [marksArray]="marksArray"
  985. [included]="nzIncluded"
  986. [reverse]="nzReverse"
  987. ></nz-slider-step>
  988. }
  989. @for (handle of handles; track handle.value; let handleIndex = $index) {
  990. <nz-slider-handle
  991. [vertical]="nzVertical"
  992. [reverse]="nzReverse"
  993. [offset]="handle.offset!"
  994. [value]="handle.value!"
  995. [active]="handle.active"
  996. [tooltipFormatter]="nzTipFormatter"
  997. [tooltipVisible]="nzTooltipVisible"
  998. [tooltipPlacement]="nzTooltipPlacement"
  999. [dir]="dir"
  1000. (focusin)="onHandleFocusIn(handleIndex)"
  1001. ></nz-slider-handle>
  1002. }
  1003. @if (marksArray) {
  1004. <nz-slider-marks
  1005. [vertical]="nzVertical"
  1006. [min]="nzMin"
  1007. [max]="nzMax"
  1008. [lowerBound]="$any(bounds.lower)"
  1009. [upperBound]="$any(bounds.upper)"
  1010. [marksArray]="marksArray"
  1011. [included]="nzIncluded"
  1012. [reverse]="nzReverse"
  1013. ></nz-slider-marks>
  1014. }
  1015. `,
  1016. imports: [NzSliderTrackComponent, NzSliderStepComponent, NzSliderHandleComponent, NzSliderMarksComponent],
  1017. host: {
  1018. class: 'ant-slider',
  1019. '[class.ant-slider-rtl]': `dir === 'rtl'`,
  1020. '[class.ant-slider-disabled]': 'nzDisabled',
  1021. '[class.ant-slider-vertical]': 'nzVertical',
  1022. '[class.ant-slider-with-marks]': 'marksArray',
  1023. '(keydown)': 'onKeyDown($event)'
  1024. }
  1025. }]
  1026. }], ctorParameters: () => [{ type: i0.ElementRef }, { type: NzSliderService }, { type: i0.ChangeDetectorRef }, { type: i2$1.Platform }, { type: i3.Directionality }], propDecorators: { handlerComponents: [{
  1027. type: ViewChildren,
  1028. args: [NzSliderHandleComponent]
  1029. }], nzDisabled: [{
  1030. type: Input,
  1031. args: [{ transform: booleanAttribute }]
  1032. }], nzDots: [{
  1033. type: Input,
  1034. args: [{ transform: booleanAttribute }]
  1035. }], nzIncluded: [{
  1036. type: Input,
  1037. args: [{ transform: booleanAttribute }]
  1038. }], nzRange: [{
  1039. type: Input,
  1040. args: [{ transform: booleanAttribute }]
  1041. }], nzVertical: [{
  1042. type: Input,
  1043. args: [{ transform: booleanAttribute }]
  1044. }], nzReverse: [{
  1045. type: Input,
  1046. args: [{ transform: booleanAttribute }]
  1047. }], nzDefaultValue: [{
  1048. type: Input
  1049. }], nzMarks: [{
  1050. type: Input
  1051. }], nzMax: [{
  1052. type: Input,
  1053. args: [{ transform: numberAttribute }]
  1054. }], nzMin: [{
  1055. type: Input,
  1056. args: [{ transform: numberAttribute }]
  1057. }], nzStep: [{
  1058. type: Input,
  1059. args: [{ transform: numberAttributeWithZeroFallback }]
  1060. }], nzTooltipVisible: [{
  1061. type: Input
  1062. }], nzTooltipPlacement: [{
  1063. type: Input
  1064. }], nzTipFormatter: [{
  1065. type: Input
  1066. }], nzOnAfterChange: [{
  1067. type: Output
  1068. }] } });
  1069. function getValueTypeNotMatchError() {
  1070. return new Error(`The "nzRange" can't match the "ngModel"'s type, please check these properties: "nzRange", "ngModel", "nzDefaultValue".`);
  1071. }
  1072. function isValueRange(value) {
  1073. if (value instanceof Array) {
  1074. return value.length === 2;
  1075. }
  1076. else {
  1077. return false;
  1078. }
  1079. }
  1080. function generateHandlers(amount) {
  1081. return Array(amount)
  1082. .fill(0)
  1083. .map(() => ({ offset: null, value: null, active: false }));
  1084. }
  1085. /**
  1086. * Check if value is valid and throw error if value-type/range not match.
  1087. */
  1088. function assertValueValid(value, isRange) {
  1089. if ((!isValueRange(value) && isNaN(value)) || (isValueRange(value) && value.some(v => isNaN(v)))) {
  1090. return false;
  1091. }
  1092. return assertValueTypeMatch(value, isRange);
  1093. }
  1094. /**
  1095. * Assert that if `this.nzRange` is `true`, value is also a range, vice versa.
  1096. */
  1097. function assertValueTypeMatch(value, isRange = false) {
  1098. if (isValueRange(value) !== isRange) {
  1099. throw getValueTypeNotMatchError();
  1100. }
  1101. return true;
  1102. }
  1103. function valuesEqual(valA, valB) {
  1104. if (typeof valA !== typeof valB) {
  1105. return false;
  1106. }
  1107. return isValueRange(valA) && isValueRange(valB) ? arraysEqual(valA, valB) : valA === valB;
  1108. }
  1109. /**
  1110. * Use of this source code is governed by an MIT-style license that can be
  1111. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1112. */
  1113. class NzSliderModule {
  1114. static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
  1115. static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.2", ngImport: i0, type: NzSliderModule, imports: [NzSliderComponent,
  1116. NzSliderTrackComponent,
  1117. NzSliderHandleComponent,
  1118. NzSliderStepComponent,
  1119. NzSliderMarksComponent], exports: [NzSliderComponent,
  1120. NzSliderTrackComponent,
  1121. NzSliderHandleComponent,
  1122. NzSliderStepComponent,
  1123. NzSliderMarksComponent] });
  1124. static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderModule, imports: [NzSliderComponent,
  1125. NzSliderHandleComponent] });
  1126. }
  1127. i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.2", ngImport: i0, type: NzSliderModule, decorators: [{
  1128. type: NgModule,
  1129. args: [{
  1130. imports: [
  1131. NzSliderComponent,
  1132. NzSliderTrackComponent,
  1133. NzSliderHandleComponent,
  1134. NzSliderStepComponent,
  1135. NzSliderMarksComponent
  1136. ],
  1137. exports: [
  1138. NzSliderComponent,
  1139. NzSliderTrackComponent,
  1140. NzSliderHandleComponent,
  1141. NzSliderStepComponent,
  1142. NzSliderMarksComponent
  1143. ]
  1144. }]
  1145. }] });
  1146. /**
  1147. * Use of this source code is governed by an MIT-style license that can be
  1148. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1149. */
  1150. class NzMarks {
  1151. }
  1152. /**
  1153. * Use of this source code is governed by an MIT-style license that can be
  1154. * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  1155. */
  1156. /**
  1157. * Generated bundle index. Do not edit.
  1158. */
  1159. export { NzMarks, NzSliderComponent, NzSliderModule, NzSliderHandleComponent as ɵNzSliderHandleComponent, NzSliderMarksComponent as ɵNzSliderMarksComponent, NzSliderService as ɵNzSliderService, NzSliderStepComponent as ɵNzSliderStepComponent, NzSliderTrackComponent as ɵNzSliderTrackComponent };
  1160. //# sourceMappingURL=ng-zorro-antd-slider.mjs.map