@taiga-ui/kit
Version:
Taiga UI Angular main components kit
75 lines • 10.1 kB
JavaScript
import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { DOCUMENT } from '@angular/common';
import { Directive, inject, Input } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { TUI_FALSE_HANDLER, TUI_TRUE_HANDLER } from '@taiga-ui/cdk/constants';
import { tuiTypedFromEvent } from '@taiga-ui/cdk/observables';
import { tuiInjectElement } from '@taiga-ui/cdk/utils/dom';
import { combineLatest, filter, map, merge, tap } from 'rxjs';
import * as i0 from "@angular/core";
const SLIDER_INTERACTION_KEYS = new Set([
'ArrowDown',
'ArrowLeft',
'ArrowRight',
'ArrowUp',
'End',
'Home',
'PageDown',
'PageUp',
]);
/**
* Native <input type='range' readonly> doesn't work.
* This directive imitates this native behaviour.
*/
class TuiSliderReadonly {
constructor() {
this.el = tuiInjectElement();
this.doc = inject(DOCUMENT);
this.readonly = true;
const touchStart$ = tuiTypedFromEvent(this.el, 'touchstart', {
passive: false,
});
const touchMove$ = tuiTypedFromEvent(this.doc, 'touchmove', {
passive: false,
});
const touchEnd$ = tuiTypedFromEvent(this.doc, 'touchend', {
passive: true,
});
const shouldPreventMove$ = merge(touchStart$.pipe(tap((e) => this.preventEvent(e)), map(TUI_TRUE_HANDLER)), touchEnd$.pipe(map(TUI_FALSE_HANDLER)));
/**
* @bad TODO think about another solution.
* Keep in mind that preventing touch event (on slider) inside `@HostListener('touchstart')` doesn't work for mobile chrome.
*/
combineLatest([touchMove$, shouldPreventMove$])
.pipe(filter(([_, shouldPreventMove]) => shouldPreventMove), takeUntilDestroyed())
.subscribe(([moveEvent]) => this.preventEvent(moveEvent));
}
preventEvent(event) {
if (event.cancelable && this.readonly) {
event.preventDefault();
}
}
preventKeyboardInteraction(event) {
if (SLIDER_INTERACTION_KEYS.has(event.key)) {
this.preventEvent(event);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSliderReadonly, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.12", type: TuiSliderReadonly, isStandalone: true, selector: "input[tuiSlider][readonly]", inputs: { readonly: ["readonly", "readonly", coerceBooleanProperty] }, host: { listeners: { "keydown": "preventKeyboardInteraction($event)", "mousedown": "preventEvent($event)" } }, ngImport: i0 }); }
}
export { TuiSliderReadonly };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TuiSliderReadonly, decorators: [{
type: Directive,
args: [{
standalone: true,
selector: 'input[tuiSlider][readonly]',
host: {
'(keydown)': 'preventKeyboardInteraction($event)',
'(mousedown)': 'preventEvent($event)',
},
}]
}], ctorParameters: function () { return []; }, propDecorators: { readonly: [{
type: Input,
args: [{ transform: coerceBooleanProperty }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2xpZGVyLXJlYWRvbmx5LmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2tpdC9jb21wb25lbnRzL3NsaWRlci9oZWxwZXJzL3NsaWRlci1yZWFkb25seS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFvQixxQkFBcUIsRUFBQyxNQUFNLHVCQUF1QixDQUFDO0FBQy9FLE9BQU8sRUFBQyxRQUFRLEVBQUMsTUFBTSxpQkFBaUIsQ0FBQztBQUN6QyxPQUFPLEVBQUMsU0FBUyxFQUFFLE1BQU0sRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDdkQsT0FBTyxFQUFDLGtCQUFrQixFQUFDLE1BQU0sNEJBQTRCLENBQUM7QUFDOUQsT0FBTyxFQUFDLGlCQUFpQixFQUFFLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDNUUsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sMkJBQTJCLENBQUM7QUFDNUQsT0FBTyxFQUFDLGdCQUFnQixFQUFDLE1BQU0seUJBQXlCLENBQUM7QUFDekQsT0FBTyxFQUFDLGFBQWEsRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxHQUFHLEVBQUMsTUFBTSxNQUFNLENBQUM7O0FBRTVELE1BQU0sdUJBQXVCLEdBQUcsSUFBSSxHQUFHLENBQUM7SUFDcEMsV0FBVztJQUNYLFdBQVc7SUFDWCxZQUFZO0lBQ1osU0FBUztJQUNULEtBQUs7SUFDTCxNQUFNO0lBQ04sVUFBVTtJQUNWLFFBQVE7Q0FDWCxDQUFDLENBQUM7QUFFSDs7O0dBR0c7QUFDSCxNQVFhLGlCQUFpQjtJQU8xQjtRQU5pQixPQUFFLEdBQUcsZ0JBQWdCLEVBQW9CLENBQUM7UUFDMUMsUUFBRyxHQUFHLE1BQU0sQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUdqQyxhQUFRLEdBQWlCLElBQUksQ0FBQztRQUdqQyxNQUFNLFdBQVcsR0FBRyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsRUFBRSxFQUFFLFlBQVksRUFBRTtZQUN6RCxPQUFPLEVBQUUsS0FBSztTQUNqQixDQUFDLENBQUM7UUFDSCxNQUFNLFVBQVUsR0FBRyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLFdBQVcsRUFBRTtZQUN4RCxPQUFPLEVBQUUsS0FBSztTQUNqQixDQUFDLENBQUM7UUFDSCxNQUFNLFNBQVMsR0FBRyxpQkFBaUIsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLFVBQVUsRUFBRTtZQUN0RCxPQUFPLEVBQUUsSUFBSTtTQUNoQixDQUFDLENBQUM7UUFFSCxNQUFNLGtCQUFrQixHQUFHLEtBQUssQ0FDNUIsV0FBVyxDQUFDLElBQUksQ0FDWixHQUFHLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQyxDQUFDLENBQUMsRUFDaEMsR0FBRyxDQUFDLGdCQUFnQixDQUFDLENBQ3hCLEVBQ0QsU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUN6QyxDQUFDO1FBRUY7OztXQUdHO1FBQ0gsYUFBYSxDQUFDLENBQUMsVUFBVSxFQUFFLGtCQUFrQixDQUFDLENBQUM7YUFDMUMsSUFBSSxDQUNELE1BQU0sQ0FBQyxDQUFDLENBQUMsQ0FBQyxFQUFFLGlCQUFpQixDQUFDLEVBQUUsRUFBRSxDQUFDLGlCQUFpQixDQUFDLEVBQ3JELGtCQUFrQixFQUFFLENBQ3ZCO2FBQ0EsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUMsRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxTQUFTLENBQUMsQ0FBQyxDQUFDO0lBQ2xFLENBQUM7SUFFUyxZQUFZLENBQUMsS0FBWTtRQUMvQixJQUFJLEtBQUssQ0FBQyxVQUFVLElBQUksSUFBSSxDQUFDLFFBQVEsRUFBRTtZQUNuQyxLQUFLLENBQUMsY0FBYyxFQUFFLENBQUM7U0FDMUI7SUFDTCxDQUFDO0lBRVMsMEJBQTBCLENBQUMsS0FBb0I7UUFDckQsSUFBSSx1QkFBdUIsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxFQUFFO1lBQ3hDLElBQUksQ0FBQyxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7U0FDNUI7SUFDTCxDQUFDOytHQWhEUSxpQkFBaUI7bUdBQWpCLGlCQUFpQiwyR0FJUCxxQkFBcUI7O1NBSi9CLGlCQUFpQjs0RkFBakIsaUJBQWlCO2tCQVI3QixTQUFTO21CQUFDO29CQUNQLFVBQVUsRUFBRSxJQUFJO29CQUNoQixRQUFRLEVBQUUsNEJBQTRCO29CQUN0QyxJQUFJLEVBQUU7d0JBQ0YsV0FBVyxFQUFFLG9DQUFvQzt3QkFDakQsYUFBYSxFQUFFLHNCQUFzQjtxQkFDeEM7aUJBQ0o7MEVBTVUsUUFBUTtzQkFEZCxLQUFLO3VCQUFDLEVBQUMsU0FBUyxFQUFFLHFCQUFxQixFQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHt0eXBlIEJvb2xlYW5JbnB1dCwgY29lcmNlQm9vbGVhblByb3BlcnR5fSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHtET0NVTUVOVH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7RGlyZWN0aXZlLCBpbmplY3QsIElucHV0fSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7dGFrZVVudGlsRGVzdHJveWVkfSBmcm9tICdAYW5ndWxhci9jb3JlL3J4anMtaW50ZXJvcCc7XG5pbXBvcnQge1RVSV9GQUxTRV9IQU5ETEVSLCBUVUlfVFJVRV9IQU5ETEVSfSBmcm9tICdAdGFpZ2EtdWkvY2RrL2NvbnN0YW50cyc7XG5pbXBvcnQge3R1aVR5cGVkRnJvbUV2ZW50fSBmcm9tICdAdGFpZ2EtdWkvY2RrL29ic2VydmFibGVzJztcbmltcG9ydCB7dHVpSW5qZWN0RWxlbWVudH0gZnJvbSAnQHRhaWdhLXVpL2Nkay91dGlscy9kb20nO1xuaW1wb3J0IHtjb21iaW5lTGF0ZXN0LCBmaWx0ZXIsIG1hcCwgbWVyZ2UsIHRhcH0gZnJvbSAncnhqcyc7XG5cbmNvbnN0IFNMSURFUl9JTlRFUkFDVElPTl9LRVlTID0gbmV3IFNldChbXG4gICAgJ0Fycm93RG93bicsXG4gICAgJ0Fycm93TGVmdCcsXG4gICAgJ0Fycm93UmlnaHQnLFxuICAgICdBcnJvd1VwJyxcbiAgICAnRW5kJyxcbiAgICAnSG9tZScsXG4gICAgJ1BhZ2VEb3duJyxcbiAgICAnUGFnZVVwJyxcbl0pO1xuXG4vKipcbiAqIE5hdGl2ZSA8aW5wdXQgdHlwZT0ncmFuZ2UnIHJlYWRvbmx5PiBkb2Vzbid0IHdvcmsuXG4gKiBUaGlzIGRpcmVjdGl2ZSBpbWl0YXRlcyB0aGlzIG5hdGl2ZSBiZWhhdmlvdXIuXG4gKi9cbkBEaXJlY3RpdmUoe1xuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgc2VsZWN0b3I6ICdpbnB1dFt0dWlTbGlkZXJdW3JlYWRvbmx5XScsXG4gICAgaG9zdDoge1xuICAgICAgICAnKGtleWRvd24pJzogJ3ByZXZlbnRLZXlib2FyZEludGVyYWN0aW9uKCRldmVudCknLFxuICAgICAgICAnKG1vdXNlZG93biknOiAncHJldmVudEV2ZW50KCRldmVudCknLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFR1aVNsaWRlclJlYWRvbmx5IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IGVsID0gdHVpSW5qZWN0RWxlbWVudDxIVE1MSW5wdXRFbGVtZW50PigpO1xuICAgIHByaXZhdGUgcmVhZG9ubHkgZG9jID0gaW5qZWN0KERPQ1VNRU5UKTtcblxuICAgIEBJbnB1dCh7dHJhbnNmb3JtOiBjb2VyY2VCb29sZWFuUHJvcGVydHl9KVxuICAgIHB1YmxpYyByZWFkb25seTogQm9vbGVhbklucHV0ID0gdHJ1ZTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICBjb25zdCB0b3VjaFN0YXJ0JCA9IHR1aVR5cGVkRnJvbUV2ZW50KHRoaXMuZWwsICd0b3VjaHN0YXJ0Jywge1xuICAgICAgICAgICAgcGFzc2l2ZTogZmFsc2UsXG4gICAgICAgIH0pO1xuICAgICAgICBjb25zdCB0b3VjaE1vdmUkID0gdHVpVHlwZWRGcm9tRXZlbnQodGhpcy5kb2MsICd0b3VjaG1vdmUnLCB7XG4gICAgICAgICAgICBwYXNzaXZlOiBmYWxzZSxcbiAgICAgICAgfSk7XG4gICAgICAgIGNvbnN0IHRvdWNoRW5kJCA9IHR1aVR5cGVkRnJvbUV2ZW50KHRoaXMuZG9jLCAndG91Y2hlbmQnLCB7XG4gICAgICAgICAgICBwYXNzaXZlOiB0cnVlLFxuICAgICAgICB9KTtcblxuICAgICAgICBjb25zdCBzaG91bGRQcmV2ZW50TW92ZSQgPSBtZXJnZShcbiAgICAgICAgICAgIHRvdWNoU3RhcnQkLnBpcGUoXG4gICAgICAgICAgICAgICAgdGFwKChlKSA9PiB0aGlzLnByZXZlbnRFdmVudChlKSksXG4gICAgICAgICAgICAgICAgbWFwKFRVSV9UUlVFX0hBTkRMRVIpLFxuICAgICAgICAgICAgKSxcbiAgICAgICAgICAgIHRvdWNoRW5kJC5waXBlKG1hcChUVUlfRkFMU0VfSEFORExFUikpLFxuICAgICAgICApO1xuXG4gICAgICAgIC8qKlxuICAgICAgICAgKiBAYmFkIFRPRE8gdGhpbmsgYWJvdXQgYW5vdGhlciBzb2x1dGlvbi5cbiAgICAgICAgICogS2VlcCBpbiBtaW5kIHRoYXQgcHJldmVudGluZyB0b3VjaCBldmVudCAob24gc2xpZGVyKSBpbnNpZGUgYEBIb3N0TGlzdGVuZXIoJ3RvdWNoc3RhcnQnKWAgZG9lc24ndCB3b3JrIGZvciBtb2JpbGUgY2hyb21lLlxuICAgICAgICAgKi9cbiAgICAgICAgY29tYmluZUxhdGVzdChbdG91Y2hNb3ZlJCwgc2hvdWxkUHJldmVudE1vdmUkXSlcbiAgICAgICAgICAgIC5waXBlKFxuICAgICAgICAgICAgICAgIGZpbHRlcigoW18sIHNob3VsZFByZXZlbnRNb3ZlXSkgPT4gc2hvdWxkUHJldmVudE1vdmUpLFxuICAgICAgICAgICAgICAgIHRha2VVbnRpbERlc3Ryb3llZCgpLFxuICAgICAgICAgICAgKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgoW21vdmVFdmVudF0pID0+IHRoaXMucHJldmVudEV2ZW50KG1vdmVFdmVudCkpO1xuICAgIH1cblxuICAgIHByb3RlY3RlZCBwcmV2ZW50RXZlbnQoZXZlbnQ6IEV2ZW50KTogdm9pZCB7XG4gICAgICAgIGlmIChldmVudC5jYW5jZWxhYmxlICYmIHRoaXMucmVhZG9ubHkpIHtcbiAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwcm90ZWN0ZWQgcHJldmVudEtleWJvYXJkSW50ZXJhY3Rpb24oZXZlbnQ6IEtleWJvYXJkRXZlbnQpOiB2b2lkIHtcbiAgICAgICAgaWYgKFNMSURFUl9JTlRFUkFDVElPTl9LRVlTLmhhcyhldmVudC5rZXkpKSB7XG4gICAgICAgICAgICB0aGlzLnByZXZlbnRFdmVudChldmVudCk7XG4gICAgICAgIH1cbiAgICB9XG59XG4iXX0=