@taiga-ui/kit
Version:
Taiga UI Angular main components kit
339 lines (333 loc) • 15.4 kB
JavaScript
import { __extends, __spread, __decorate, __param } from 'tslib';
import { InjectionToken, EventEmitter, Optional, Self, Inject, ChangeDetectorRef, Input, Output, ContentChild, TemplateRef, ViewChild, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { NgControl } from '@angular/forms';
import { TuiDestroyService, isNativeFocused, getClipboardDataText, setNativeFocused, tuiRequiredSetter, tuiDefaultProp, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiControl, TuiActiveZoneModule } from '@taiga-ui/cdk';
import { formatPhone, TuiDataListDirective, TuiHostedDropdownComponent, TuiPrimitiveTextfieldComponent, TUI_DATA_LIST_HOST, TuiPrimitiveTextfieldModule, TuiHostedDropdownModule, TuiTextfieldControllerModule } from '@taiga-ui/core';
import { fromEvent, merge, Observable } from 'rxjs';
import { DOCUMENT } from '@angular/common';
import { FIXED_DROPDOWN_CONTROLLER_PROVIDER } from '@taiga-ui/kit/providers';
import { windowToggle, flatMap, startWith, takeUntil } from 'rxjs/operators';
import { TuiValueAccessorModule } from '@taiga-ui/kit/directives';
import { TextMaskModule } from 'angular2-text-mask';
var SELECTION_STREAM = new InjectionToken('A stream of selection changes');
var INPUT_PHONE_PROVIDERS = [
TuiDestroyService,
FIXED_DROPDOWN_CONTROLLER_PROVIDER,
{
provide: SELECTION_STREAM,
deps: [TuiDestroyService, DOCUMENT],
useFactory: selectionStreamFactory,
},
];
function selectionStreamFactory(destroy$, documentRef) {
return fromEvent(documentRef, 'selectionchange').pipe(windowToggle(merge(fromEvent(documentRef, 'mouseup'), fromEvent(documentRef, 'keydown')), function () { return fromEvent(documentRef, 'mousedown'); }), flatMap(function (windowed$) { return windowed$.pipe(startWith(null)); }), takeUntil(destroy$));
}
var NON_PLUS_AND_DIGITS_REGEX = /[ \-_\(\)]/g;
// @dynamic
var TuiInputPhoneComponent = /** @class */ (function (_super) {
__extends(TuiInputPhoneComponent, _super);
function TuiInputPhoneComponent(control, changeDetectorRef, selection$) {
var _this = _super.call(this, control, changeDetectorRef) || this;
_this.phoneMaskAfterCountryCode = '(###) ###-##-##';
_this.allowText = false;
_this.search = '';
_this.searchChange = new EventEmitter();
_this.textMaskOptions = {
mask: function (value) {
return _this.allowText && !_this.value && isText(value) && value !== '+'
? false
: __spread(_this.countryCode.split(''), [
' '
], _this.phoneMaskAfterCountryCode
.replace(/[^#\- \(\)]+/g, '')
.split('')
.map(function (item) { return (item === '#' ? /\d/ : item); }));
},
pipe: function (value) {
if (_this.allowText) {
return value;
}
return value === '' && _this.focused && !_this.readOnly
? _this.countryCode + " "
: value.replace(/-$/, '');
},
guide: false,
};
_this.countryCode = '+7';
_this.open = false;
selection$.subscribe(function () {
_this.setCaretPosition();
});
return _this;
}
TuiInputPhoneComponent_1 = TuiInputPhoneComponent;
Object.defineProperty(TuiInputPhoneComponent.prototype, "countryCodeSetter", {
set: function (countryCode) {
this.updateValueWithNewContryCode(countryCode);
this.countryCode = countryCode;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputPhoneComponent.prototype, "nativeFocusableElement", {
get: function () {
return !this.textfield || this.computedDisabled
? null
: this.textfield.nativeFocusableElement;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputPhoneComponent.prototype, "focused", {
get: function () {
return (isNativeFocused(this.nativeFocusableElement) ||
(!!this.dropdown && this.dropdown.focused));
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputPhoneComponent.prototype, "nativeValue", {
get: function () {
return this.value
? formatPhone(this.value, this.countryCode, this.phoneMaskAfterCountryCode)
: this.search || '';
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputPhoneComponent.prototype, "inputMode", {
get: function () {
return this.allowText ? "text" /* Text */ : "numeric" /* Numeric */;
},
enumerable: true,
configurable: true
});
TuiInputPhoneComponent.prototype.onHovered = function (hovered) {
this.updateHovered(hovered);
};
TuiInputPhoneComponent.prototype.onDrop = function (event) {
if (!event.dataTransfer) {
return;
}
this.setValueWithoutPrefix(event.dataTransfer.getData('text'));
event.preventDefault();
};
TuiInputPhoneComponent.prototype.onPaste = function (event) {
this.setValueWithoutPrefix(getClipboardDataText(event));
};
TuiInputPhoneComponent.prototype.onActiveZone = function (active) {
this.updateFocused(active);
if (active && !this.nativeValue && !this.readOnly && !this.allowText) {
this.updateSearch(this.countryCode);
return;
}
if (this.nativeValue === this.countryCode ||
(this.search !== null &&
isNaN(parseInt(this.search.replace(NON_PLUS_AND_DIGITS_REGEX, ''), 10)))) {
this.updateSearch('');
}
};
TuiInputPhoneComponent.prototype.onBackspace = function (event) {
if ((event.target.selectionStart || 0) <= this.nonRemovableLength &&
event.target.selectionStart === event.target.selectionEnd) {
event.preventDefault();
}
};
TuiInputPhoneComponent.prototype.onValueChange = function (value) {
var parsed = isText(value)
? value
: value.replace(NON_PLUS_AND_DIGITS_REGEX, '');
this.updateSearch(parsed);
this.updateValue(parsed === this.countryCode || isText(parsed) ? '' : parsed);
this.open = true;
};
TuiInputPhoneComponent.prototype.handleOption = function (item) {
this.focusInput();
this.updateValue(item);
this.updateSearch('');
this.open = false;
};
TuiInputPhoneComponent.prototype.setDisabledState = function () {
_super.prototype.setDisabledState.call(this);
this.open = false;
};
TuiInputPhoneComponent.prototype.writeValue = function (value) {
_super.prototype.writeValue.call(this, value);
this.updateSearch('');
};
TuiInputPhoneComponent.prototype.getFallbackValue = function () {
return '';
};
Object.defineProperty(TuiInputPhoneComponent.prototype, "caretIsInForbiddenArea", {
get: function () {
var nativeFocusableElement = this.nativeFocusableElement;
if (!nativeFocusableElement) {
return false;
}
var selectionStart = nativeFocusableElement.selectionStart, selectionEnd = nativeFocusableElement.selectionEnd;
return (isNativeFocused(nativeFocusableElement) &&
selectionStart !== null &&
selectionStart < this.nonRemovableLength &&
selectionStart === selectionEnd);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputPhoneComponent.prototype, "nonRemovableLength", {
get: function () {
return this.isTextValue ? 0 : this.countryCode.length + 1;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputPhoneComponent.prototype, "maxPhoneLength", {
get: function () {
return (this.countryCode.length +
this.phoneMaskAfterCountryCode.replace(/[^#]+/g, '').length);
},
enumerable: true,
configurable: true
});
Object.defineProperty(TuiInputPhoneComponent.prototype, "isTextValue", {
get: function () {
return !!this.search && isText(this.search);
},
enumerable: true,
configurable: true
});
TuiInputPhoneComponent.prototype.setCaretPosition = function () {
if (this.caretIsInForbiddenArea && !!this.nativeFocusableElement) {
this.nativeFocusableElement.setSelectionRange(this.nonRemovableLength, this.nonRemovableLength);
}
};
TuiInputPhoneComponent.prototype.setValueWithoutPrefix = function (value) {
if (this.readOnly) {
return;
}
this.open = true;
this.updateValue(this.cleanValue(value));
this.updateSearch(this.allowText && isText(value)
? value
: value.replace(NON_PLUS_AND_DIGITS_REGEX, ''));
};
TuiInputPhoneComponent.prototype.cleanValue = function (value) {
var reg = this.countryCode === '+7'
? /^7|^8/
: new RegExp(this.countryCode.substring(1));
var oldValueExist = this.value.length > this.countryCode.length &&
this.value.length < this.maxPhoneLength;
var newValueLength = value.replace(NON_PLUS_AND_DIGITS_REGEX, '').length;
var cleanNewValue = value.replace(/[^0-9]+/g, '');
var selectionLength = getSelection().toString().length;
if (oldValueExist && selectionLength === 0) {
return ("" + this.value + cleanNewValue).slice(0, this.maxPhoneLength);
}
if (newValueLength < this.maxPhoneLength - 1) {
return ("" + this.countryCode + cleanNewValue).slice(0, this.maxPhoneLength);
}
return ("" + this.countryCode + cleanNewValue.replace(reg, '')).slice(0, this.maxPhoneLength);
};
TuiInputPhoneComponent.prototype.focusInput = function () {
if (this.nativeFocusableElement) {
setNativeFocused(this.nativeFocusableElement, true, true);
}
};
TuiInputPhoneComponent.prototype.updateSearch = function (search) {
if (this.search === search) {
return;
}
this.search = search;
this.searchChange.emit(search);
};
TuiInputPhoneComponent.prototype.updateValueWithNewContryCode = function (newCountryCode) {
if (!this.isTextValue) {
this.updateValue(this.value.replace(this.countryCode, newCountryCode));
}
};
var TuiInputPhoneComponent_1;
TuiInputPhoneComponent.ctorParameters = function () { return [
{ type: NgControl, decorators: [{ type: Optional }, { type: Self }, { type: Inject, args: [NgControl,] }] },
{ type: ChangeDetectorRef, decorators: [{ type: Inject, args: [ChangeDetectorRef,] }] },
{ type: Observable, decorators: [{ type: Inject, args: [SELECTION_STREAM,] }] }
]; };
__decorate([
Input('countryCode'),
tuiRequiredSetter()
], TuiInputPhoneComponent.prototype, "countryCodeSetter", null);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputPhoneComponent.prototype, "phoneMaskAfterCountryCode", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputPhoneComponent.prototype, "allowText", void 0);
__decorate([
Input(),
tuiDefaultProp()
], TuiInputPhoneComponent.prototype, "search", void 0);
__decorate([
Output()
], TuiInputPhoneComponent.prototype, "searchChange", void 0);
__decorate([
ContentChild(TuiDataListDirective, { read: TemplateRef })
], TuiInputPhoneComponent.prototype, "datalist", void 0);
__decorate([
ViewChild(TuiHostedDropdownComponent)
], TuiInputPhoneComponent.prototype, "dropdown", void 0);
__decorate([
ViewChild(TuiPrimitiveTextfieldComponent)
], TuiInputPhoneComponent.prototype, "textfield", void 0);
TuiInputPhoneComponent = TuiInputPhoneComponent_1 = __decorate([
Component({
selector: 'tui-input-phone',
template: "<tui-hosted-dropdown\n class=\"hosted\"\n [content]=\"datalist || ''\"\n [(open)]=\"open\"\n (tuiActiveZoneChange)=\"onActiveZone($event)\"\n>\n <tui-primitive-textfield\n class=\"textfield\"\n tuiValueAccessor\n tuiTextfieldType=\"tel\"\n [tuiTextfieldInputMode]=\"inputMode\"\n [pseudoHovered]=\"pseudoHovered\"\n [pseudoFocused]=\"computedFocused\"\n [invalid]=\"computedInvalid\"\n [nativeId]=\"nativeId\"\n [readOnly]=\"readOnly\"\n [disabled]=\"computedDisabled\"\n [focusable]=\"focusable\"\n [textMask]=\"textMaskOptions\"\n [value]=\"nativeValue\"\n (valueChange)=\"onValueChange($event)\"\n (hoveredChange)=\"onHovered($event)\"\n (drop)=\"onDrop($event)\"\n (keydown.backspace)=\"onBackspace($event)\"\n (paste.prevent)=\"onPaste($event)\"\n >\n <ng-content></ng-content>\n </tui-primitive-textfield>\n</tui-hosted-dropdown>\n",
changeDetection: ChangeDetectionStrategy.OnPush,
providers: [
{
provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
useExisting: forwardRef(function () { return TuiInputPhoneComponent_1; }),
},
{
provide: TUI_DATA_LIST_HOST,
useExisting: forwardRef(function () { return TuiInputPhoneComponent_1; }),
},
INPUT_PHONE_PROVIDERS,
],
styles: [":host{display:block;border-radius:var(--tui-radius-m)}:host._disabled{pointer-events:none}.hosted{display:block;border-radius:inherit}.textfield{border-radius:inherit}"]
}),
__param(0, Optional()),
__param(0, Self()),
__param(0, Inject(NgControl)),
__param(1, Inject(ChangeDetectorRef)),
__param(2, Inject(SELECTION_STREAM))
], TuiInputPhoneComponent);
return TuiInputPhoneComponent;
}(AbstractTuiControl));
function isText(value) {
return isNaN(parseInt(value.replace(NON_PLUS_AND_DIGITS_REGEX, ''), 10));
}
var TuiInputPhoneModule = /** @class */ (function () {
function TuiInputPhoneModule() {
}
TuiInputPhoneModule = __decorate([
NgModule({
imports: [
TextMaskModule,
TuiPrimitiveTextfieldModule,
TuiHostedDropdownModule,
TuiTextfieldControllerModule,
TuiActiveZoneModule,
TuiValueAccessorModule,
],
declarations: [TuiInputPhoneComponent],
exports: [TuiInputPhoneComponent],
})
], TuiInputPhoneModule);
return TuiInputPhoneModule;
}());
/**
* Generated bundle index. Do not edit.
*/
export { INPUT_PHONE_PROVIDERS, SELECTION_STREAM, TuiInputPhoneComponent, TuiInputPhoneModule, selectionStreamFactory };
//# sourceMappingURL=taiga-ui-kit-components-input-phone.js.map