@taiga-ui/kit
Version:
Taiga UI Angular main components kit
69 lines (63 loc) • 11.7 kB
JavaScript
import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { inject, linkedSignal, input, model, computed, ChangeDetectionStrategy, Component, contentChildren } from '@angular/core';
import * as i1 from '@angular/forms';
import { FormsModule } from '@angular/forms';
class TuiTimelineItem {
constructor() {
this.timeline = inject(TuiTimelineComponent);
this.offset = linkedSignal(() => this.value()[0]);
this.draggable = input(true);
this.resizable = input(true);
this.value = model([0, 0]);
this.min = computed((array = this.timeline.value()) => array.reduce((min, [_, end]) => (end <= this.value()[0] && end > min ? end : min), 0));
this.max = computed((array = this.timeline.value()) => array.reduce((max, [start]) => (start >= this.value()[1] && start < max ? start : max), this.timeline.max()));
}
update(input) {
const length = this.value()[1] - this.value()[0];
const [start, end] = this.timeline
.gaps()
.map(([start, end]) => [
end === this.max() ? this.min() : start,
start === this.min() ? this.max() : end,
])
.find(([start, end]) => end - start >= length &&
this.offset() >= start &&
this.offset() < end) ?? [this.min(), this.max()];
this.offset.set(Math.max(Math.min(this.offset(), end - length), start));
this.value.set([this.offset(), this.offset() + length]);
input.valueAsNumber = this.offset();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTimelineItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiTimelineItem, isStandalone: true, selector: "label[tuiTimelineItem]", inputs: { draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "style.inline-size.%": "timeline.d() * (value()[1] - value()[0])", "style.inset-inline-start.%": "timeline.d() * offset()" } }, ngImport: i0, template: "@if (draggable()) {\n <input\n #drag\n type=\"range\"\n class=\"t-input t-input_drag\"\n [max]=\"timeline.max() - value()[1] + value()[0]\"\n [style.--drag.%]=\"timeline.d() * (value()[1] - value()[0])\"\n [(ngModel)]=\"offset\"\n (ngModelChange)=\"update(drag)\"\n />\n}\n@if (resizable()) {\n <input\n type=\"range\"\n class=\"t-input\"\n [max]=\"value()[1] - 1\"\n [min]=\"min()\"\n [style.inset-inline-end.%]=\"timeline.d() * (timeline.max() - value()[1])\"\n [style.inset-inline-start.%]=\"timeline.d() * min()\"\n [(ngModel)]=\"value()[0]\"\n (ngModelChange)=\"value.set([value()[0], value()[1]])\"\n />\n <input\n type=\"range\"\n class=\"t-input\"\n [max]=\"max()\"\n [min]=\"value()[0] + 1\"\n [style.inset-inline-end.%]=\"timeline.d() * (timeline.max() - max())\"\n [style.inset-inline-start.%]=\"timeline.d() * value()[0]\"\n [(ngModel)]=\"value()[1]\"\n (ngModelChange)=\"value.set([value()[0], value()[1]])\"\n />\n}\n<ng-content />\n", styles: [":host{position:absolute;inset:0;pointer-events:none}.t-input{position:fixed;inset:0;margin:0;-webkit-appearance:none;appearance:none;pointer-events:none;background:none;outline:none;cursor:ew-resize;--drag: 1rem}:host-context(tui-timeline[data-orientation=\"vertical\"]) .t-input:not(.t-input_drag){cursor:ns-resize}.t-input_drag{cursor:grab}.t-input_drag:active{cursor:grabbing}.t-input::-webkit-slider-runnable-track{block-size:100%}.t-input::-webkit-slider-thumb{block-size:100%;inline-size:var(--drag);-webkit-appearance:none;appearance:none;background:none;border:none;pointer-events:auto;border-radius:var(--tui-radius-xs)}.t-input::-moz-range-thumb{block-size:100%;inline-size:var(--drag);-webkit-appearance:none;appearance:none;background:none;border:none;pointer-events:auto;border-radius:var(--tui-radius-xs)}.t-input:focus-visible::-webkit-slider-thumb{outline:.125rem solid var(--tui-border-focus)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTimelineItem, decorators: [{
type: Component,
args: [{ selector: 'label[tuiTimelineItem]', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, host: {
'[style.inline-size.%]': 'timeline.d() * (value()[1] - value()[0])',
'[style.inset-inline-start.%]': 'timeline.d() * offset()',
}, template: "@if (draggable()) {\n <input\n #drag\n type=\"range\"\n class=\"t-input t-input_drag\"\n [max]=\"timeline.max() - value()[1] + value()[0]\"\n [style.--drag.%]=\"timeline.d() * (value()[1] - value()[0])\"\n [(ngModel)]=\"offset\"\n (ngModelChange)=\"update(drag)\"\n />\n}\n@if (resizable()) {\n <input\n type=\"range\"\n class=\"t-input\"\n [max]=\"value()[1] - 1\"\n [min]=\"min()\"\n [style.inset-inline-end.%]=\"timeline.d() * (timeline.max() - value()[1])\"\n [style.inset-inline-start.%]=\"timeline.d() * min()\"\n [(ngModel)]=\"value()[0]\"\n (ngModelChange)=\"value.set([value()[0], value()[1]])\"\n />\n <input\n type=\"range\"\n class=\"t-input\"\n [max]=\"max()\"\n [min]=\"value()[0] + 1\"\n [style.inset-inline-end.%]=\"timeline.d() * (timeline.max() - max())\"\n [style.inset-inline-start.%]=\"timeline.d() * value()[0]\"\n [(ngModel)]=\"value()[1]\"\n (ngModelChange)=\"value.set([value()[0], value()[1]])\"\n />\n}\n<ng-content />\n", styles: [":host{position:absolute;inset:0;pointer-events:none}.t-input{position:fixed;inset:0;margin:0;-webkit-appearance:none;appearance:none;pointer-events:none;background:none;outline:none;cursor:ew-resize;--drag: 1rem}:host-context(tui-timeline[data-orientation=\"vertical\"]) .t-input:not(.t-input_drag){cursor:ns-resize}.t-input_drag{cursor:grab}.t-input_drag:active{cursor:grabbing}.t-input::-webkit-slider-runnable-track{block-size:100%}.t-input::-webkit-slider-thumb{block-size:100%;inline-size:var(--drag);-webkit-appearance:none;appearance:none;background:none;border:none;pointer-events:auto;border-radius:var(--tui-radius-xs)}.t-input::-moz-range-thumb{block-size:100%;inline-size:var(--drag);-webkit-appearance:none;appearance:none;background:none;border:none;pointer-events:auto;border-radius:var(--tui-radius-xs)}.t-input:focus-visible::-webkit-slider-thumb{outline:.125rem solid var(--tui-border-focus)}\n"] }]
}] });
class TuiTimelineComponent {
constructor() {
this.items = contentChildren(TuiTimelineItem);
this.d = computed(() => 100 / this.max());
this.value = computed(() => this.items().map(({ value }) => value()));
this.gaps = computed((value = this.value().slice()) => [[0, this.max()], ...value.sort(([a], [b]) => a - b)].map(([_, end = 0], index, array) => [index ? end : 0, array[index + 1]?.[0] ?? this.max()]));
this.orientation = input('horizontal');
this.template = input();
this.max = input(100);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TuiTimelineComponent, isStandalone: true, selector: "tui-timeline", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, template: { classPropertyName: "template", publicName: "template", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-orientation": "orientation()" } }, queries: [{ propertyName: "items", predicate: TuiTimelineItem, isSignal: true }], ngImport: i0, template: "@for (_ of '-'.repeat(value().length + 1); track value()[$index]) {\n @let gap = gaps()[$index] ?? [0, 0];\n @if (gap[0] < gap[1]) {\n <span\n class=\"t-gap\"\n [style.inline-size.%]=\"(gap[1] - gap[0]) * d()\"\n [style.inset-inline-start.%]=\"gap[0] * d()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"template() || null\"\n [ngTemplateOutletContext]=\"{$implicit: $index}\"\n />\n </span>\n }\n}\n<ng-content />\n", styles: [":host{display:block;transform:translateZ(0)}:host[data-orientation=vertical]{writing-mode:vertical-lr}.t-gap{position:absolute;block-size:100%}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TuiTimelineComponent, decorators: [{
type: Component,
args: [{ selector: 'tui-timeline', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, host: { '[attr.data-orientation]': 'orientation()' }, template: "@for (_ of '-'.repeat(value().length + 1); track value()[$index]) {\n @let gap = gaps()[$index] ?? [0, 0];\n @if (gap[0] < gap[1]) {\n <span\n class=\"t-gap\"\n [style.inline-size.%]=\"(gap[1] - gap[0]) * d()\"\n [style.inset-inline-start.%]=\"gap[0] * d()\"\n >\n <ng-container\n [ngTemplateOutlet]=\"template() || null\"\n [ngTemplateOutletContext]=\"{$implicit: $index}\"\n />\n </span>\n }\n}\n<ng-content />\n", styles: [":host{display:block;transform:translateZ(0)}:host[data-orientation=vertical]{writing-mode:vertical-lr}.t-gap{position:absolute;block-size:100%}\n"] }]
}] });
const TuiTimeline = [TuiTimelineComponent, TuiTimelineItem];
/**
* Generated bundle index. Do not edit.
*/
export { TuiTimeline, TuiTimelineComponent, TuiTimelineItem };
//# sourceMappingURL=taiga-ui-kit-components-timeline.mjs.map