@libs-ui/components-inputs-range-slider 0.2.304 → 0.2.306-3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-inputs-range-slider.mjs","sources":["../../../../../../libs-ui/components/inputs/range-slider/src/inputs-range-slider.component.ts","../../../../../../libs-ui/components/inputs/range-slider/src/inputs-range-slider.component.html","../../../../../../libs-ui/components/inputs/range-slider/src/libs-ui-components-inputs-range-slider.ts"],"sourcesContent":["import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, computed, effect, input, model, output, signal, untracked, viewChild } from '@angular/core';\nimport { IEvent } from '@libs-ui/interfaces-types';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { Observable, Subject, fromEvent } from 'rxjs';\nimport { debounceTime, mergeMap, skip, take, takeUntil, tap } from 'rxjs/operators';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-inputs-range_slider',\n templateUrl: 'inputs-range-slider.component.html',\n styleUrl: 'inputs-range-slider.component.scss',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LibsUiComponentsInputsRangeSliderComponent implements AfterViewInit, OnDestroy {\n\n // #region PROPERTY\n protected visibilityMin = signal<boolean>(true);\n protected visibilityMax = signal<boolean>(true);\n protected position = signal<number>(0);\n protected focus = signal<boolean>(false);\n protected maxDisplay = computed(this.maxComputed.bind(this))\n\n private onChange = new Subject<number>();\n private onDestroy = new Subject<void>();\n\n // #region INPUT\n readonly mode = input<'audio' | 'slider'>('slider');\n readonly min = input<number>(1);\n readonly max = input<number>(100);\n readonly value = model<number>(0);\n readonly classInclude = input<string, string | undefined>('libs-ui-range-slider-container', { transform: value => value ? `libs-ui-range-slider-container ${value}` : 'libs-ui-range-slider-container' });\n readonly disable = input<boolean>(false);\n readonly unit = input<string>();\n readonly step = input<number>(0);\n readonly hideProgressingValue = input<boolean>();\n readonly formatNumber = input<boolean>();\n\n // #region OUTPUT\n readonly outChange = output<number>();\n\n /* VIEW CHILD */\n private readonly containerEl = viewChild<ElementRef>('containerEl');\n private readonly rangeEl = viewChild<ElementRef>('rangeEl');\n private readonly valueEl = viewChild<ElementRef>('valueEl');\n private readonly maxValueEl = viewChild<ElementRef>('maxValueEl');\n private readonly minValueEl = viewChild<ElementRef>('minValueEl');\n\n constructor() {\n effect(() => {\n this.onChange.next(this.value());\n untracked(() => {\n this.setVariableCss();\n this.calculatePosition();\n });\n });\n }\n\n /* FUNCTIONS */\n ngAfterViewInit(): void {\n this.initEvent(window as unknown as HTMLElement, 'mouseup').pipe(tap(() => this.focus.set(false)));\n this.initEvent(this.rangeEl()?.nativeElement, 'mousedown').pipe(tap(() => this.focus.set(true)));\n // const elementMouseUp = this.initEvent(this.rangeEl()?.nativeElement, 'click').pipe(take(1));\n // const elementMouseMove = this.initEvent(this.rangeEl()?.nativeElement, 'mousemove').pipe(takeUntil(windowMouseUp));\n // const drag = elementMouseDown.pipe(mergeMap(() => elementMouseMove));\n // const click = elementMouseDown.pipe(mergeMap(() => elementMouseUp));\n\n // drag.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n // click.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n const inputChange = this.initEvent(this.rangeEl()?.nativeElement, 'input');\n\n inputChange.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n this.onChange.pipe(skip(this.mode() === 'audio' ? 1 : 0), debounceTime(250), takeUntil(this.onDestroy)).subscribe((value: number) => this.outChange.emit(value));\n this.calculatePosition();\n }\n\n private initEvent(element: HTMLElement, name: string): Observable<IEvent> {\n return fromEvent<IEvent>(element, name).pipe(tap((e: IEvent) => e.stopPropagation()), takeUntil(this.onDestroy));\n }\n\n private async handlerChange(event: IEvent) {\n if (this.disable()) {\n event.preventDefault();\n event.stopPropagation();\n event.target.value = this.value();\n\n return;\n }\n this.value.set(+event.target.value);\n this.onChange.next(this.value());\n }\n\n private async calculatePosition() {\n if (!this.containerEl() || !this.valueEl()) {\n return;\n }\n const sliderContainer = this.containerEl()?.nativeElement.getBoundingClientRect();\n const progressing = this.max() ? ((this.value() - this.min()) / (this.max() - this.min())) : 0;\n\n if (this.hideProgressingValue()) {\n return;\n }\n const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();\n const rectMax = this.containerEl()?.nativeElement.getBoundingClientRect();\n\n this.position.set((sliderContainer.width * progressing) - ((rectValue.width) / 2) + ((progressing < 0.5 ? 1 : 0.5) - progressing) * 8);\n const grandWidthValue = this.position() + rectValue.width - rectMax.width;\n\n if (grandWidthValue > 0) {\n this.position.update(value => value - grandWidthValue);\n }\n setTimeout(() => {\n this.setVisibility();\n })\n }\n\n private async setVisibility() {\n const rectMax = this.maxValueEl()?.nativeElement.getBoundingClientRect();\n const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();\n const rectMin = this.minValueEl()?.nativeElement.getBoundingClientRect();\n\n this.visibilityMin.set(true);\n this.visibilityMax.set(true);\n if (!this.value()) {\n this.visibilityMin.set(false);\n\n return;\n }\n if (rectValue.left + rectValue.width >= rectMax.left) {\n this.visibilityMax.set(false);\n }\n if (rectValue.left <= (rectMin.width + rectMin.left)) {\n this.visibilityMin.set(false);\n }\n }\n\n private async setVariableCss() {\n const element = this.containerEl()?.nativeElement;\n\n if (!element) {\n return;\n }\n const colorHover = getComputedStyle(element).getPropertyValue('--libs-ui-color-light-1');\n\n element.style.setProperty('--libs-ui-slider-border-box-shadow', `${colorHover}30`);\n const percent = (100 * (this.value() - this.min()) / (this.max() - this.min()))\n element.style.setProperty('--libs-ui-slider-value', `${percent}%`);\n }\n\n protected maxComputed() {\n if (this.formatNumber()) {\n return viewDataNumberByLanguage(this.max(), true, 1, false, true);\n }\n\n return this.max();\n }\n\n ngOnDestroy(): void {\n this.onDestroy.next();\n this.onDestroy.complete();\n }\n\n}\n","<div [class]=\"classInclude()\"\n [style.height.px]=\"mode() === 'slider' ? 44 : 22\"\n [class.pt-[4px]]=\"mode() === 'slider'\"\n #containerEl>\n <div [class.hidden]=\"!focus()\"\n class=\"libs-ui-range-slider-icon-active\">\n </div>\n <input #rangeEl\n class=\"libs-ui-range-slider\"\n [attr.mode]=\"mode()\"\n [attr.focus]=\"focus()\"\n [attr.disable]=\"disable()\"\n [value]=\"value()\"\n [type]=\"'range'\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\">\n @if (mode() === 'slider') {\n <div class=\"flex justify-between relative mt-[8px]\">\n <div #minValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMin()\">\n {{ min() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n <div #valueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] absolute bottom-0 flex\"\n [style.left.px]=\"position()\">\n @if (!hideProgressingValue()) {\n {{ value() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n }\n </div>\n <div #maxValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMax()\">\n {{ maxComputed() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"libs-ui-components-inputs-range-slider.mjs","sources":["../../../../../../libs-ui/components/inputs/range-slider/src/inputs-range-slider.component.ts","../../../../../../libs-ui/components/inputs/range-slider/src/inputs-range-slider.component.html","../../../../../../libs-ui/components/inputs/range-slider/src/libs-ui-components-inputs-range-slider.ts"],"sourcesContent":["import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, computed, effect, input, model, output, signal, untracked, viewChild } from '@angular/core';\nimport { IEvent } from '@libs-ui/interfaces-types';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { Observable, Subject, fromEvent } from 'rxjs';\nimport { debounceTime, mergeMap, skip, take, takeUntil, tap } from 'rxjs/operators';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-inputs-range_slider',\n templateUrl: 'inputs-range-slider.component.html',\n styleUrl: 'inputs-range-slider.component.scss',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class LibsUiComponentsInputsRangeSliderComponent implements AfterViewInit, OnDestroy {\n\n // #region PROPERTY\n protected visibilityMin = signal<boolean>(true);\n protected visibilityMax = signal<boolean>(true);\n protected position = signal<number>(0);\n protected focus = signal<boolean>(false);\n protected maxDisplay = computed(this.maxComputed.bind(this))\n\n private onChange = new Subject<number>();\n private onDestroy = new Subject<void>();\n\n // #region INPUT\n readonly mode = input<'audio' | 'slider'>('slider');\n readonly min = input<number>(1);\n readonly max = input<number>(100);\n readonly value = model<number>(0);\n readonly classInclude = input<string, string | undefined>('libs-ui-range-slider-container', { transform: value => value ? `libs-ui-range-slider-container ${value}` : 'libs-ui-range-slider-container' });\n readonly disable = input<boolean>(false);\n readonly unit = input<string>();\n readonly step = input<number>(0);\n readonly hideProgressingValue = input<boolean>();\n readonly formatNumber = input<boolean>();\n\n // #region OUTPUT\n readonly outChange = output<number>();\n\n /* VIEW CHILD */\n private readonly containerEl = viewChild<ElementRef>('containerEl');\n private readonly rangeEl = viewChild<ElementRef>('rangeEl');\n private readonly valueEl = viewChild<ElementRef>('valueEl');\n private readonly maxValueEl = viewChild<ElementRef>('maxValueEl');\n private readonly minValueEl = viewChild<ElementRef>('minValueEl');\n\n constructor() {\n effect(() => {\n this.onChange.next(this.value());\n untracked(() => {\n this.setVariableCss();\n this.calculatePosition();\n });\n });\n }\n\n /* FUNCTIONS */\n ngAfterViewInit(): void {\n this.initEvent(window as unknown as HTMLElement, 'mouseup').pipe(tap(() => this.focus.set(false)));\n this.initEvent(this.rangeEl()?.nativeElement, 'mousedown').pipe(tap(() => this.focus.set(true)));\n // const elementMouseUp = this.initEvent(this.rangeEl()?.nativeElement, 'click').pipe(take(1));\n // const elementMouseMove = this.initEvent(this.rangeEl()?.nativeElement, 'mousemove').pipe(takeUntil(windowMouseUp));\n // const drag = elementMouseDown.pipe(mergeMap(() => elementMouseMove));\n // const click = elementMouseDown.pipe(mergeMap(() => elementMouseUp));\n\n // drag.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n // click.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n const inputChange = this.initEvent(this.rangeEl()?.nativeElement, 'input');\n\n inputChange.pipe(takeUntil(this.onDestroy)).subscribe(this.handlerChange.bind(this));\n this.onChange.pipe(skip(this.mode() === 'audio' ? 1 : 0), debounceTime(250), takeUntil(this.onDestroy)).subscribe((value: number) => this.outChange.emit(value));\n this.calculatePosition();\n }\n\n private initEvent(element: HTMLElement, name: string): Observable<IEvent> {\n return fromEvent<IEvent>(element, name).pipe(tap((e: IEvent) => e.stopPropagation()), takeUntil(this.onDestroy));\n }\n\n private async handlerChange(event: IEvent) {\n if (this.disable()) {\n event.preventDefault();\n event.stopPropagation();\n event.target.value = this.value();\n\n return;\n }\n this.value.set(+event.target.value);\n this.onChange.next(this.value());\n }\n\n private async calculatePosition() {\n if (!this.containerEl() || !this.valueEl()) {\n return;\n }\n const sliderContainer = this.containerEl()?.nativeElement.getBoundingClientRect();\n const progressing = this.max() ? ((this.value() - this.min()) / (this.max() - this.min())) : 0;\n\n if (this.hideProgressingValue()) {\n return;\n }\n const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();\n const rectMax = this.containerEl()?.nativeElement.getBoundingClientRect();\n\n this.position.set((sliderContainer.width * progressing) - ((rectValue.width) / 2) + ((progressing < 0.5 ? 1 : 0.5) - progressing) * 8);\n const grandWidthValue = this.position() + rectValue.width - rectMax.width;\n\n if (grandWidthValue > 0) {\n this.position.update(value => value - grandWidthValue);\n }\n setTimeout(() => {\n this.setVisibility();\n })\n }\n\n private async setVisibility() {\n const rectMax = this.maxValueEl()?.nativeElement.getBoundingClientRect();\n const rectValue = this.valueEl()?.nativeElement.getBoundingClientRect();\n const rectMin = this.minValueEl()?.nativeElement.getBoundingClientRect();\n\n this.visibilityMin.set(true);\n this.visibilityMax.set(true);\n if (!this.value()) {\n this.visibilityMin.set(false);\n\n return;\n }\n if (rectValue.left + rectValue.width >= rectMax.left) {\n this.visibilityMax.set(false);\n }\n if (rectValue.left <= (rectMin.width + rectMin.left)) {\n this.visibilityMin.set(false);\n }\n }\n\n private async setVariableCss() {\n const element = this.containerEl()?.nativeElement;\n\n if (!element) {\n return;\n }\n const colorHover = getComputedStyle(element).getPropertyValue('--libs-ui-color-light-1');\n\n element.style.setProperty('--libs-ui-slider-border-box-shadow', `${colorHover}30`);\n const percent = (100 * (this.value() - this.min()) / (this.max() - this.min()))\n element.style.setProperty('--libs-ui-slider-value', `${percent}%`);\n }\n\n protected maxComputed() {\n if (this.formatNumber()) {\n return viewDataNumberByLanguage(this.max(), true, 1, false, true);\n }\n\n return this.max();\n }\n\n ngOnDestroy(): void {\n this.onDestroy.next();\n this.onDestroy.complete();\n }\n\n}\n","<div [class]=\"classInclude()\"\n [style.height.px]=\"mode() === 'slider' ? 44 : 22\"\n [class.pt-[4px]]=\"mode() === 'slider'\"\n #containerEl>\n <div [class.hidden]=\"!focus()\"\n class=\"libs-ui-range-slider-icon-active\">\n </div>\n <input #rangeEl\n class=\"libs-ui-range-slider\"\n [attr.mode]=\"mode()\"\n [attr.focus]=\"focus()\"\n [attr.disable]=\"disable()\"\n [value]=\"value()\"\n [type]=\"'range'\"\n [min]=\"min()\"\n [max]=\"max()\"\n [step]=\"step()\">\n @if (mode() === 'slider') {\n <div class=\"flex justify-between relative mt-[8px]\">\n <div #minValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMin()\">\n {{ min() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n <div #valueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] absolute bottom-0 flex\"\n [style.left.px]=\"position()\">\n @if (!hideProgressingValue()) {\n {{ value() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n }\n </div>\n <div #maxValueEl\n class=\"libs-ui-font-h7r text-[#9ca2ad] flex\"\n [class.invisible]=\"!visibilityMax()\">\n {{ maxComputed() }}\n @if (unit()) {\n <span class=\"libs-ui-font-h7r text-[#9ca2ad]\">{{ unit() }}</span>\n }\n </div>\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-range-slider",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.306-3",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/interfaces-types": "0.2.
|
|
7
|
-
"@libs-ui/utils": "0.2.
|
|
6
|
+
"@libs-ui/interfaces-types": "0.2.306-3",
|
|
7
|
+
"@libs-ui/utils": "0.2.306-3",
|
|
8
8
|
"rxjs": "~7.8.0"
|
|
9
9
|
},
|
|
10
10
|
"sideEffects": false,
|