@koalarx/ui
Version:
Koala UI is a modern and accessible component library designed to speed up interface development in Angular projects. With simple integration and clear documentation, you can easily build robust and visually appealing applications.
92 lines (88 loc) • 6.64 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, DestroyRef, input, computed, linkedSignal, afterRenderEffect, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ReactiveFormsModule } from '@angular/forms';
class InputRange {
destroyRef = inject(DestroyRef);
control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
min = input.required(...(ngDevMode ? [{ debugName: "min" }] : []));
max = input.required(...(ngDevMode ? [{ debugName: "max" }] : []));
step = input.required(...(ngDevMode ? [{ debugName: "step" }] : []));
hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
color = input(...(ngDevMode ? [undefined, { debugName: "color" }] : []));
size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
colorClass = computed(() => {
switch (this.color()) {
case 'neutral':
return 'range-neutral';
case 'primary':
return 'range-primary';
case 'secondary':
return 'range-secondary';
case 'accent':
return 'range-accent';
case 'info':
return 'range-info';
case 'success':
return 'range-success';
case 'warning':
return 'range-warning';
case 'error':
return 'range-error';
case 'ghost':
return 'range-ghost';
default:
return 'range';
}
}, ...(ngDevMode ? [{ debugName: "colorClass" }] : []));
sizeClass = computed(() => {
switch (this.size()) {
case 'extraSmall':
return 'range-xs';
case 'small':
return 'range-sm';
case 'medium':
return 'range-md';
case 'large':
return 'range-lg';
case 'extraLarge':
return 'range-xl';
default:
return '';
}
}, ...(ngDevMode ? [{ debugName: "sizeClass" }] : []));
steps = computed(() => {
const stepArray = [];
if (this.step() > 0) {
for (let i = this.min(); i <= this.max(); i += this.step()) {
stepArray.push(i);
}
}
return stepArray;
}, ...(ngDevMode ? [{ debugName: "steps" }] : []));
value = linkedSignal(() => this.control().value, ...(ngDevMode ? [{ debugName: "value" }] : []));
constructor() {
afterRenderEffect(() => {
this.control()
.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
.subscribe((value) => {
this.value.set(value);
});
});
}
setValue(event) {
const target = event.target;
this.control().setValue(target.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRange, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: InputRange, isStandalone: true, selector: "kl-input-range", inputs: { control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: true, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: true, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: true, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"w-full\">\n <input type=\"range\"\n [min]=\"min()\"\n [max]=\"max()\"\n [value]=\"value()\"\n class=\"range w-full\"\n [class]=\"colorClass() + ' ' + sizeClass()\"\n [step]=\"step()\"\n (change)=\"setValue($event)\"\n />\n\n <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n @for (step of steps(); track $index) {\n <span>|</span>\n }\n </div>\n\n <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n @for (step of steps(); track $index) {\n <span>{{step}}</span>\n }\n </div>\n</div>\n\n@if (hint()) {\n <span class=\"hint-content\">{{hint()}}</span>\n}\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: InputRange, decorators: [{
type: Component,
args: [{ selector: 'kl-input-range', imports: [ReactiveFormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"w-full\">\n <input type=\"range\"\n [min]=\"min()\"\n [max]=\"max()\"\n [value]=\"value()\"\n class=\"range w-full\"\n [class]=\"colorClass() + ' ' + sizeClass()\"\n [step]=\"step()\"\n (change)=\"setValue($event)\"\n />\n\n <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n @for (step of steps(); track $index) {\n <span>|</span>\n }\n </div>\n\n <div class=\"flex justify-between px-2.5 mt-2 text-xs\">\n @for (step of steps(); track $index) {\n <span>{{step}}</span>\n }\n </div>\n</div>\n\n@if (hint()) {\n <span class=\"hint-content\">{{hint()}}</span>\n}\n" }]
}], ctorParameters: () => [], propDecorators: { control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: true }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: true }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: true }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
/**
* Generated bundle index. Do not edit.
*/
export { InputRange };
//# sourceMappingURL=koalarx-ui-shared-components-input-field-range.mjs.map