UNPKG

@taiga-ui/kit

Version:

Taiga UI Angular main components kit

64 lines 12 kB
import { NgIf } from '@angular/common'; import { ChangeDetectionStrategy, Component, computed, Directive, inject, ViewEncapsulation, } from '@angular/core'; import { TuiControl } from '@taiga-ui/cdk/classes'; import { TuiTime } from '@taiga-ui/cdk/date-time'; import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom'; import { TuiTextfieldContent, TuiTextfieldDirective, TuiWithNativePicker, } from '@taiga-ui/core/components/textfield'; import { TuiInputTimeDirective } from './input-time.directive'; import * as i0 from "@angular/core"; import * as i1 from "@taiga-ui/core/components/textfield"; class TuiNativeTimePicker { constructor() { this.list = tuiInjectElement().getAttribute('list'); } getStep(timeMode) { switch (timeMode) { case 'HH:MM:SS': case 'HH:MM:SS AA': return 1; case 'HH:MM:SS.MSS': case 'HH:MM:SS.MSS AA': return 0.001; default: return 60; } } toISOString(value) { const [day, time] = Array.isArray(value) ? value : [null, value]; const dateString = day ? day.toJSON() + (time ? 'T' : '') : ''; const timeString = time ? time.toString('HH:MM:SS.MSS') : ''; return dateString + timeString; } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNativeTimePicker, deps: [], target: i0.ɵɵFactoryTarget.Directive }); } static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TuiNativeTimePicker, host: { properties: { "attr.list": "null" } }, ngImport: i0 }); } } export { TuiNativeTimePicker }; i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiNativeTimePicker, decorators: [{ type: Directive, args: [{ host: { '[attr.list]': 'null', }, }] }] }); class TuiInputTimeComponent extends TuiNativeTimePicker { constructor() { super(...arguments); this.control = inject(TuiControl); this.host = inject(TuiInputTimeDirective); this.textfield = inject(TuiTextfieldDirective); this.value = computed(() => this.toISOString(this.control.value())); this.step = computed(() => this.getStep(this.host.timeMode())); } setValue(value) { this.host.setValue(TuiTime.fromString(value)); } static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); } static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TuiInputTimeComponent, isStandalone: true, selector: "input[tuiInputTime][type=\"time\"]", host: { attributes: { "ngSkipHydration": "true" } }, usesInheritance: true, hostDirectives: [{ directive: i1.TuiWithNativePicker }], ngImport: i0, template: "<ng-container *ngIf=\"host.native\">\n <input\n *tuiTextfieldContent\n type=\"time\"\n [attr.list]=\"list\"\n [step]=\"step()\"\n [value]=\"value()\"\n (change)=\"setValue($any($event.target).value)\"\n />\n</ng-container>\n", styles: ["tui-textfield input[tuiInputTime]~.t-content input[type=time]{position:absolute;right:0;left:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0}tui-textfield input[tuiInputTime]~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TuiTextfieldContent, selector: "ng-template[tuiTextfieldContent]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } } export { TuiInputTimeComponent }; i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiInputTimeComponent, decorators: [{ type: Component, args: [{ standalone: true, selector: 'input[tuiInputTime][type="time"]', imports: [NgIf, TuiTextfieldContent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [TuiWithNativePicker], host: { ngSkipHydration: 'true' }, template: "<ng-container *ngIf=\"host.native\">\n <input\n *tuiTextfieldContent\n type=\"time\"\n [attr.list]=\"list\"\n [step]=\"step()\"\n [value]=\"value()\"\n (change)=\"setValue($any($event.target).value)\"\n />\n</ng-container>\n", styles: ["tui-textfield input[tuiInputTime]~.t-content input[type=time]{position:absolute;right:0;left:auto;inline-size:calc(var(--t-right) + var(--t-padding));opacity:0;margin:0;padding:0}tui-textfield input[tuiInputTime]~.t-content input[type=time]::-webkit-calendar-picker-indicator{position:absolute;top:0;left:0;inline-size:100%;block-size:100%}\n"] }] }] }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQtdGltZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9raXQvY29tcG9uZW50cy9pbnB1dC10aW1lL2lucHV0LXRpbWUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2l0L2NvbXBvbmVudHMvaW5wdXQtdGltZS9pbnB1dC10aW1lLnRlbXBsYXRlLmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLElBQUksRUFBQyxNQUFNLGlCQUFpQixDQUFDO0FBQ3JDLE9BQU8sRUFDSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFFBQVEsRUFDUixTQUFTLEVBQ1QsTUFBTSxFQUNOLGlCQUFpQixHQUNwQixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUMsVUFBVSxFQUFDLE1BQU0sdUJBQXVCLENBQUM7QUFDakQsT0FBTyxFQUFjLE9BQU8sRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQzdELE9BQU8sRUFBQyxnQkFBZ0IsRUFBQyxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFDSCxtQkFBbUIsRUFDbkIscUJBQXFCLEVBQ3JCLG1CQUFtQixHQUN0QixNQUFNLHFDQUFxQyxDQUFDO0FBRTdDLE9BQU8sRUFBQyxxQkFBcUIsRUFBQyxNQUFNLHdCQUF3QixDQUFDOzs7QUFFN0QsTUFLc0IsbUJBQW1CO0lBTHpDO1FBTXVCLFNBQUksR0FBRyxnQkFBZ0IsRUFBRSxDQUFDLFlBQVksQ0FBQyxNQUFNLENBQUMsQ0FBQztLQXdCckU7SUF0QmEsT0FBTyxDQUFDLFFBQXlCO1FBQ3ZDLFFBQVEsUUFBUSxFQUFFO1lBQ2QsS0FBSyxVQUFVLENBQUM7WUFDaEIsS0FBSyxhQUFhO2dCQUNkLE9BQU8sQ0FBQyxDQUFDO1lBQ2IsS0FBSyxjQUFjLENBQUM7WUFDcEIsS0FBSyxpQkFBaUI7Z0JBQ2xCLE9BQU8sS0FBSyxDQUFDO1lBQ2pCO2dCQUNJLE9BQU8sRUFBRSxDQUFDO1NBQ2pCO0lBQ0wsQ0FBQztJQUVTLFdBQVcsQ0FDakIsS0FBeUQ7UUFFekQsTUFBTSxDQUFDLEdBQUcsRUFBRSxJQUFJLENBQUMsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLEtBQUssQ0FBQyxDQUFDO1FBQ2pFLE1BQU0sVUFBVSxHQUFHLEdBQUcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDL0QsTUFBTSxVQUFVLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFFN0QsT0FBTyxVQUFVLEdBQUcsVUFBVSxDQUFDO0lBQ25DLENBQUM7K0dBeEJpQixtQkFBbUI7bUdBQW5CLG1CQUFtQjs7U0FBbkIsbUJBQW1COzRGQUFuQixtQkFBbUI7a0JBTHhDLFNBQVM7bUJBQUM7b0JBQ1AsSUFBSSxFQUFFO3dCQUNGLGFBQWEsRUFBRSxNQUFNO3FCQUN4QjtpQkFDSjs7QUE0QkQsTUFXYSxxQkFBc0IsU0FBUSxtQkFBbUI7SUFYOUQ7O1FBWXFCLFlBQU8sR0FBK0IsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1FBRXZELFNBQUksR0FBRyxNQUFNLENBQUMscUJBQXFCLENBQUMsQ0FBQztRQUVyQyxjQUFTLEdBQUcsTUFBTSxDQUFDLHFCQUFxQixDQUFDLENBQUM7UUFDMUMsVUFBSyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBRS9ELFNBQUksR0FBRyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQztLQUtoRjtJQUhhLFFBQVEsQ0FBQyxLQUFhO1FBQzVCLElBQUksQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLE9BQU8sQ0FBQyxVQUFVLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNsRCxDQUFDOytHQVpRLHFCQUFxQjttR0FBckIscUJBQXFCLG1PQ2hFbEMsa1JBVUEsZ1pEOENjLElBQUksNkZBQUUsbUJBQW1COztTQVExQixxQkFBcUI7NEZBQXJCLHFCQUFxQjtrQkFYakMsU0FBUztpQ0FDTSxJQUFJLFlBQ04sa0NBQWtDLFdBQ25DLENBQUMsSUFBSSxFQUFFLG1CQUFtQixDQUFDLGlCQUdyQixpQkFBaUIsQ0FBQyxJQUFJLG1CQUNwQix1QkFBdUIsQ0FBQyxNQUFNLGtCQUMvQixDQUFDLG1CQUFtQixDQUFDLFFBQy9CLEVBQUMsZUFBZSxFQUFFLE1BQU0sRUFBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7TmdJZn0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIGNvbXB1dGVkLFxuICAgIERpcmVjdGl2ZSxcbiAgICBpbmplY3QsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHt0eXBlIE1hc2tpdG9UaW1lTW9kZX0gZnJvbSAnQG1hc2tpdG8va2l0JztcbmltcG9ydCB7VHVpQ29udHJvbH0gZnJvbSAnQHRhaWdhLXVpL2Nkay9jbGFzc2VzJztcbmltcG9ydCB7dHlwZSBUdWlEYXksIFR1aVRpbWV9IGZyb20gJ0B0YWlnYS11aS9jZGsvZGF0ZS10aW1lJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHtcbiAgICBUdWlUZXh0ZmllbGRDb250ZW50LFxuICAgIFR1aVRleHRmaWVsZERpcmVjdGl2ZSxcbiAgICBUdWlXaXRoTmF0aXZlUGlja2VyLFxufSBmcm9tICdAdGFpZ2EtdWkvY29yZS9jb21wb25lbnRzL3RleHRmaWVsZCc7XG5cbmltcG9ydCB7VHVpSW5wdXRUaW1lRGlyZWN0aXZlfSBmcm9tICcuL2lucHV0LXRpbWUuZGlyZWN0aXZlJztcblxuQERpcmVjdGl2ZSh7XG4gICAgaG9zdDoge1xuICAgICAgICAnW2F0dHIubGlzdF0nOiAnbnVsbCcsXG4gICAgfSxcbn0pXG5leHBvcnQgYWJzdHJhY3QgY2xhc3MgVHVpTmF0aXZlVGltZVBpY2tlciB7XG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IGxpc3QgPSB0dWlJbmplY3RFbGVtZW50KCkuZ2V0QXR0cmlidXRlKCdsaXN0Jyk7XG5cbiAgICBwcm90ZWN0ZWQgZ2V0U3RlcCh0aW1lTW9kZTogTWFza2l0b1RpbWVNb2RlKTogbnVtYmVyIHtcbiAgICAgICAgc3dpdGNoICh0aW1lTW9kZSkge1xuICAgICAgICAgICAgY2FzZSAnSEg6TU06U1MnOlxuICAgICAgICAgICAgY2FzZSAnSEg6TU06U1MgQUEnOlxuICAgICAgICAgICAgICAgIHJldHVybiAxO1xuICAgICAgICAgICAgY2FzZSAnSEg6TU06U1MuTVNTJzpcbiAgICAgICAgICAgIGNhc2UgJ0hIOk1NOlNTLk1TUyBBQSc6XG4gICAgICAgICAgICAgICAgcmV0dXJuIDAuMDAxO1xuICAgICAgICAgICAgZGVmYXVsdDpcbiAgICAgICAgICAgICAgICByZXR1cm4gNjA7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgdG9JU09TdHJpbmcoXG4gICAgICAgIHZhbHVlOiBUdWlUaW1lIHwgcmVhZG9ubHkgW1R1aURheSwgVHVpVGltZSB8IG51bGxdIHwgbnVsbCxcbiAgICApOiBzdHJpbmcge1xuICAgICAgICBjb25zdCBbZGF5LCB0aW1lXSA9IEFycmF5LmlzQXJyYXkodmFsdWUpID8gdmFsdWUgOiBbbnVsbCwgdmFsdWVdO1xuICAgICAgICBjb25zdCBkYXRlU3RyaW5nID0gZGF5ID8gZGF5LnRvSlNPTigpICsgKHRpbWUgPyAnVCcgOiAnJykgOiAnJztcbiAgICAgICAgY29uc3QgdGltZVN0cmluZyA9IHRpbWUgPyB0aW1lLnRvU3RyaW5nKCdISDpNTTpTUy5NU1MnKSA6ICcnO1xuXG4gICAgICAgIHJldHVybiBkYXRlU3RyaW5nICsgdGltZVN0cmluZztcbiAgICB9XG59XG5cbkBDb21wb25lbnQoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdpbnB1dFt0dWlJbnB1dFRpbWVdW3R5cGU9XCJ0aW1lXCJdJyxcbiAgICBpbXBvcnRzOiBbTmdJZiwgVHVpVGV4dGZpZWxkQ29udGVudF0sXG4gICAgdGVtcGxhdGVVcmw6ICcuL2lucHV0LXRpbWUudGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vaW5wdXQtdGltZS5zdHlsZS5sZXNzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0RGlyZWN0aXZlczogW1R1aVdpdGhOYXRpdmVQaWNrZXJdLFxuICAgIGhvc3Q6IHtuZ1NraXBIeWRyYXRpb246ICd0cnVlJ30sXG59KVxuZXhwb3J0IGNsYXNzIFR1aUlucHV0VGltZUNvbXBvbmVudCBleHRlbmRzIFR1aU5hdGl2ZVRpbWVQaWNrZXIge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgY29udHJvbDogVHVpQ29udHJvbDxUdWlUaW1lIHwgbnVsbD4gPSBpbmplY3QoVHVpQ29udHJvbCk7XG5cbiAgICBwcm90ZWN0ZWQgcmVhZG9ubHkgaG9zdCA9IGluamVjdChUdWlJbnB1dFRpbWVEaXJlY3RpdmUpO1xuXG4gICAgcHJvdGVjdGVkIHJlYWRvbmx5IHRleHRmaWVsZCA9IGluamVjdChUdWlUZXh0ZmllbGREaXJlY3RpdmUpO1xuICAgIHByb3RlY3RlZCByZWFkb25seSB2YWx1ZSA9IGNvbXB1dGVkKCgpID0+IHRoaXMudG9JU09TdHJpbmcodGhpcy5jb250cm9sLnZhbHVlKCkpKTtcblxuICAgIHByb3RlY3RlZCByZWFkb25seSBzdGVwID0gY29tcHV0ZWQoKCkgPT4gdGhpcy5nZXRTdGVwKHRoaXMuaG9zdC50aW1lTW9kZSgpKSk7XG5cbiAgICBwcm90ZWN0ZWQgc2V0VmFsdWUodmFsdWU6IHN0cmluZyk6IHZvaWQge1xuICAgICAgICB0aGlzLmhvc3Quc2V0VmFsdWUoVHVpVGltZS5mcm9tU3RyaW5nKHZhbHVlKSk7XG4gICAgfVxufVxuIiwiPG5nLWNvbnRhaW5lciAqbmdJZj1cImhvc3QubmF0aXZlXCI+XG4gICAgPGlucHV0XG4gICAgICAgICp0dWlUZXh0ZmllbGRDb250ZW50XG4gICAgICAgIHR5cGU9XCJ0aW1lXCJcbiAgICAgICAgW2F0dHIubGlzdF09XCJsaXN0XCJcbiAgICAgICAgW3N0ZXBdPVwic3RlcCgpXCJcbiAgICAgICAgW3ZhbHVlXT1cInZhbHVlKClcIlxuICAgICAgICAoY2hhbmdlKT1cInNldFZhbHVlKCRhbnkoJGV2ZW50LnRhcmdldCkudmFsdWUpXCJcbiAgICAvPlxuPC9uZy1jb250YWluZXI+XG4iXX0=