@logo-software/timepicker
Version:
Timepicker helps users select and set a specific time in your timesheet in 24-hour format.
618 lines (610 loc) • 35.9 kB
JavaScript
import { EventEmitter, Component, forwardRef, Input, Output, HostListener, Directive, ElementRef, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, NgModel, FormsModule } from '@angular/forms';
import { PopoverPosition, PopoverService, PopoverModule } from '@logo-software/popover';
import { CommonModule } from '@angular/common';
import * as momentNs from 'moment';
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
/**
* IconPosition sets the clock icon position on the input. Default is left.
*/
var IconPosition;
(function (IconPosition) {
IconPosition["ICON_LEFT"] = "left";
IconPosition["ICON_RIGHT"] = "right";
IconPosition["ICON_DEFAULT"] = "left";
})(IconPosition || (IconPosition = {}));
/**
* Set the sizes of the input. Default is medium.
*/
var Sizes;
(function (Sizes) {
Sizes["LARGE"] = "large";
Sizes["MEDIUM"] = "medium";
Sizes["SMALL"] = "small";
Sizes["DEFAULT"] = "medium";
})(Sizes || (Sizes = {}));
/**
* The Timepicker is the component of itself. Provides a proxy to Timepicker options as well as custom picker options.
* Add the below code to your code stack and give initializer parameters.
*
* <sub>app.component.html</sub>
*
* ```html
* <logo-timepicker
* [id]="'myLogoTimer'"
* [(ngModel)]="setTime"
* [size]="'medium'"
* [iconPosition]="'left'"
* [cssClasses]="'my-own-theme-css'"
* >
* </logo-timepicker>
* ```
*/
class TimepickerComponent {
constructor(popoverService) {
this.popoverService = popoverService;
/**
* The size of the timepicker. It accepts Sizes enum.
*/
this.size = Sizes.DEFAULT;
/**
* The position of the clock icon. It accepts IconPosition enum.
*/
this.iconPosition = IconPosition.ICON_DEFAULT;
/**
* Set disabled status of the element
*/
this.isDisabled = false;
this.hours = [];
this.minutes = [];
this.selectedHour = '00';
this.selectedMinute = '00';
this.time = null;
this.ngModelChange = new EventEmitter();
this.onChange = new EventEmitter();
this.PopoverPosition = PopoverPosition;
this.hours = Array.from({ length: 24 }, (x, i) => i < 10 ? '0' + i : '' + i);
this.minutes = Array.from({ length: 60 }, (x, i) => i < 10 ? '0' + i : '' + i);
if (!this.subscribtion) {
this.subscribtion = this.popoverService.openWatcher.subscribe((status) => {
if (!status) {
this.setInputTime(this.ngModel);
}
});
}
}
get ngModel() {
return this._ngModel;
}
/**
* Set model
*/
set ngModel(value) {
this._ngModel = value.trim();
this.setInputTime(value);
}
onResize(event) {
this.popoverService.closePopover();
}
ngOnDestroy() {
this.subscribtion.unsubscribe();
}
setInputTime(value) {
const split = value.trim().split(':');
this.selectedHour = split[0];
this.selectedMinute = split[1];
this.setTime();
}
/**
* This function shows the clock selection popover
*/
showClockSelector() {
this.popoverService.showPopover('timePopover-' + this.id);
}
/**
* This function closes the clock selection popover
*/
closeClockSelector() {
this.popoverService.closePopover();
}
/**
* This function sets the hour of the clock
*/
setHour($event) {
this.selectedHour = $event.target.value;
this.setTime();
}
/**
* This function sets the minutes of the clock
*/
setMin($event) {
this.selectedMinute = $event.target.value;
this.setTime();
}
/**
* This function sets the certain time with setted hours and minutes.
*/
setTime() {
this.time = this.selectedHour + ':' + this.selectedMinute;
}
/**
* This function handles the writing of the input
*/
handleWriteTime($event) {
const findTime = $event.target.value.split(':', 2);
findTime[0] === undefined || findTime[0].length < 2 ? this.selectedHour = '00' : this.selectedHour = findTime[0];
findTime[1] === undefined || findTime[1].length < 2 ? this.selectedMinute = '00' : this.selectedMinute = findTime[1];
}
apply() {
this.ngModelChange.emit(this.time);
this.onChange.emit(this.time);
this.popoverService.closePopover();
}
registerOnChange(fn) {
}
registerOnTouched(fn) {
}
writeValue(obj) {
}
setDisabledState(isDisabled) {
}
}
TimepickerComponent.decorators = [
{ type: Component, args: [{
selector: 'logo-timepicker',
template: "<div class=\"logo-timepicker {{cssClasses}}\">\n <div class=\"input-w-icon {{iconPosition}} {{size}}\">\n <span class=\"le-time_clock_circle_2\"></span>\n <input\n [logoPopover]=\"'timePopover-' + id\"\n (keyup)=\"handleWriteTime($event)\"\n [ngModel]=\"time\"\n [placeholder]=\"'00:00'\"\n [regexp]=\"'^[0-2]{1}$|^[0-2]{1}[0-9]{1}$|^[0-2]{1}[0-9]{1}[0-5]{1}$|^[0-2]{1}[0-9]{1}[0-5]{1}[0-9]{1}$'\"\n [value]=\"time != null ? time : ''\"\n [disabled]=\"isDisabled\"\n class=\"icon-{{iconPosition}} bordered {{size}}\"\n id=\"{{id}}\"\n logoMask\n />\n </div>\n <logo-popover\n [hasSearch]=\"false\"\n [id]=\"'timePopover-' + id\"\n [isBackClick]=\"false\"\n [position]=\"PopoverPosition.POPOVER_BOTTOM_LEFT\"\n >\n <div class=\"selection-input\">\n <div class=\"selection\">\n <select (change)=\"setHour($event)\" [(ngModel)]=\"selectedHour\" class=\"popoverSelect\" id=\"{{id}}Hours\">\n <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{hour}}</option>\n </select>\n </div>\n <div>:</div>\n <div class=\"selection\">\n <select (change)=\"setMin($event)\" [(ngModel)]=\"selectedMinute\" class=\"popoverSelect\" id=\"{{id}}Mins\">\n <option *ngFor=\"let min of minutes\" [value]=\"min\">{{min}}</option>\n </select>\n </div>\n </div>\n <div class=\"btn-area\">\n <button (click)=\"apply()\" class=\"approve-btn\">Uygula</button>\n </div>\n </logo-popover>\n</div>\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => TimepickerComponent),
multi: true,
}],
styles: [".dotted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.logo-tooltip .tip.on-bottom:after,.logo-tooltip .tip.on-top:after{border-left:7px solid transparent;border-right:7px solid transparent}.logo-tooltip .tip.on-left:after,.logo-tooltip .tip.on-right:after{border-top:7px solid transparent;border-bottom:7px solid transparent}.logo-tooltip{position:relative;color:#e94a34;cursor:pointer}.logo-tooltip .tip{position:absolute;width:180px;color:#fff;font-size:14px;font-style:normal;line-height:1.4;text-align:center;border-radius:3px;background:#333;padding:8px 12px;box-sizing:border-box;cursor:auto;z-index:10;opacity:0;visibility:hidden;transition:all .25s ease-in}.logo-tooltip .tip:after{position:absolute;width:0;height:0;content:\"\"}.logo-tooltip .tip.on-top{bottom:25px;left:0}.logo-tooltip .tip.on-top:after{bottom:-7px;left:10px;border-top:7px solid #333}.logo-tooltip .tip.on-right{top:-5px;left:103%}.logo-tooltip .tip.on-right:after{top:37%;left:-7px;border-right:7px solid #333}.logo-tooltip .tip.on-bottom{top:25px;left:0}.logo-tooltip .tip.on-bottom:after{top:-7px;left:10px;border-bottom:7px solid #333}.logo-tooltip .tip.on-left{top:-100%;right:103%}.logo-tooltip .tip.on-left:after{top:37%;right:-7px;border-left:7px solid #333}.logo-tooltip:hover .tip{opacity:1;visibility:visible}.logo-tooltip:hover .tip.on-top{transform:translateY(-15px)}.logo-tooltip:hover .tip.on-right{transform:translateX(15px)}.logo-tooltip:hover .tip.on-bottom{transform:translateY(15px)}.logo-tooltip:hover .tip.on-left{transform:translateX(-15px)}.test{content:\"a\";content:\"ba\";content:\"aa\";content:\"aade\";content:\"abde\"}:root .basic,:root .gray,:root .secondary{color:var(--leds-contrast-90pct)}:root .danger,:root .info,:root .success,:root .warning{color:var(--white)}:root .outline.primary,:root .outline.primary:active,:root .outline.primary:focus,:root .outline.primary:hover{border-color:var(--light-600)}:root .outline.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .outline.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .outline.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .outline.secondary{color:var(--leds-contrast-90pct)}:root .outline.secondary,:root .outline.secondary:active,:root .outline.secondary:focus,:root .outline.secondary:hover{border-color:var(--light-600)}:root .outline.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.basic{color:var(--leds-contrast-90pct)}:root .outline.basic,:root .outline.basic:active,:root .outline.basic:focus,:root .outline.basic:hover{border-color:var(--light-600)}:root .outline.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.neutral,:root .outline.neutral:active,:root .outline.neutral:focus,:root .outline.neutral:hover{border-color:var(--light-600)}:root .outline.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .outline.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .outline.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .outline.light{border-color:rgba(var(--light-rgb),.5)}:root .outline.light:active,:root .outline.light:focus,:root .outline.light:hover{border-color:var(--light)}:root .outline.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .outline.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .outline.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .outline.dark,:root .outline.dark:active,:root .outline.dark:focus,:root .outline.dark:hover{border-color:var(--light-600)}:root .outline.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .outline.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .outline.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .outline.gray{color:var(--leds-contrast-90pct)}:root .outline.gray,:root .outline.gray:active,:root .outline.gray:focus,:root .outline.gray:hover{border-color:var(--light-600)}:root .outline.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--leds-contrast-90pct)}:root .outline.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .outline.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .outline.info{color:var(--info)}:root .outline.info,:root .outline.info:active,:root .outline.info:focus,:root .outline.info:hover{border-color:var(--light-600)}:root .outline.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .outline.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .outline.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .outline.danger{color:var(--danger)}:root .outline.danger,:root .outline.danger:active,:root .outline.danger:focus,:root .outline.danger:hover{border-color:var(--light-600)}:root .outline.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .outline.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .outline.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .outline.warning{color:var(--warning)}:root .outline.warning,:root .outline.warning:active,:root .outline.warning:focus,:root .outline.warning:hover{border-color:var(--light-600)}:root .outline.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .outline.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .outline.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .outline.success{color:var(--success)}:root .outline.success,:root .outline.success:active,:root .outline.success:focus,:root .outline.success:hover{border-color:var(--light-600)}:root .outline.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .outline.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .outline.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}:root .ghost.primary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--primary)}:root .ghost.primary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--primary)}:root .ghost.primary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--primary)}:root .ghost.secondary,:root .ghost.secondary:hover{color:var(--leds-contrast-90pct)}:root .ghost.secondary:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.secondary:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.secondary:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus))}:root .ghost.basic,:root .ghost.basic:hover,:root .ghost.secondary:focus{color:var(--leds-contrast-90pct)}:root .ghost.basic:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.basic:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.basic:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.neutral:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--neutral)}:root .ghost.neutral:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--neutral)}:root .ghost.neutral:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--neutral)}:root .ghost.light:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--white)}:root .ghost.light:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--white)}:root .ghost.light:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--white)}:root .ghost.dark:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--dark)}:root .ghost.dark:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--dark)}:root .ghost.dark:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--dark)}:root .ghost.gray,:root .ghost.gray:hover{color:var(--leds-contrast-90pct)}:root .ghost.gray:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover))}:root .ghost.gray:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--leds-contrast-90pct)}:root .ghost.gray:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--leds-contrast-90pct)}:root .ghost.info{color:var(--info)}:root .ghost.info:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--info)}:root .ghost.info:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--info)}:root .ghost.info:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--info)}:root .ghost.danger{color:var(--danger)}:root .ghost.danger:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--danger)}:root .ghost.danger:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--danger)}:root .ghost.danger:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--danger)}:root .ghost.warning{color:var(--warning)}:root .ghost.warning:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--warning)}:root .ghost.warning:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--warning)}:root .ghost.warning:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--warning)}:root .ghost.success{color:var(--success)}:root .ghost.success:hover{background-color:rgba(var(--neutral-500-rgb),var(--ghost-hover));color:var(--success)}:root .ghost.success:active{background-color:rgba(var(--neutral-500-rgb),var(--ghost-active));color:var(--success)}:root .ghost.success:focus{background-color:rgba(var(--neutral-500-rgb),var(--ghost-focus));color:var(--success)}[class*=\" le-\"],[class^=le-]{position:relative}[class*=\" le-\"]:before,[class^=le-]:before{height:100%;top:0;-webkit-mask-size:14px;mask-size:14px}.le-time_clock_circle_2:before{-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E %3Cg id='time_clock_circle_2'%3E %3Cpath id='Shape' fill-rule='evenodd' clip-rule='evenodd' d='M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C21.994 6.47963 17.5204 2.00597 12 2ZM16.3333 16.3508C16.0192 16.6833 15.4979 16.7061 15.1558 16.4025L11.0233 12.6142C10.85 12.4569 10.7508 12.234 10.75 12V7.41667C10.75 6.95643 11.1231 6.58333 11.5833 6.58333C12.0436 6.58333 12.4167 6.95643 12.4167 7.41667V11.6333L16.2783 15.1733C16.4421 15.3222 16.5399 15.5301 16.5502 15.7511C16.5605 15.9721 16.4825 16.1882 16.3333 16.3517V16.3508Z' fill='%235A5A5A'/%3E %3C/g%3E %3C/svg%3E\");-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;display:inline-block;content:\"\";position:absolute;background:currentColor}:host{display:inline-block}:host logo-popover{width:100%}:host ::ng-deep .selection-input{display:flex;width:160px;align-items:center;justify-content:space-between}:host ::ng-deep .selection-input .selection{width:40%;text-align:center}:host ::ng-deep .selection-input .selection select{width:100%}:host ::ng-deep .selection-input .selection:last-child{position:relative;z-index:1}:host ::ng-deep .btn-area{text-align:center;margin-top:10px}:host ::ng-deep .btn-area button{width:100%}"]
},] }
];
TimepickerComponent.ctorParameters = () => [
{ type: PopoverService }
];
TimepickerComponent.propDecorators = {
id: [{ type: Input }],
size: [{ type: Input }],
iconPosition: [{ type: Input }],
cssClasses: [{ type: Input }],
isDisabled: [{ type: Input }],
ngModelChange: [{ type: Output }],
onChange: [{ type: Output }],
ngModel: [{ type: Input }],
onResize: [{ type: HostListener, args: ['window:resize', ['$event'],] }]
};
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
/**
* Util class for common javascript operations
*/
class Util {
/**
* https://gist.github.com/barlas/760cbf77b31c6922d159
* This method returns turkish chars to english lowercase version
*
* __Usage:__
* ```javascript
* Util.turkishToLower("türkçeişğİIiıŞÜĞ");
* ```
*/
static turkishToLower(value) {
let string = value;
const letters = { 'İ': 'i', 'I': 'ı', 'Ş': 'ş', 'Ğ': 'ğ', 'Ü': 'ü', 'Ö': 'ö', 'Ç': 'ç' };
string = string.replace(/(([İIŞĞÜÇÖ]))/g, (letter) => {
return letters[letter];
});
return string.toLowerCase();
}
/**
* https://gist.github.com/barlas/760cbf77b31c6922d159
* This method returns turkish chars to english uppercase version
* Usage: Util.turkishToUpper("türkçeişğİIiıŞÜĞ");
*/
static turkishToUpper(value) {
let string = value;
const letters = { 'i': 'İ', 'ş': 'Ş', 'ğ': 'Ğ', 'ü': 'Ü', 'ö': 'Ö', 'ç': 'Ç', 'ı': 'I' };
string = string.replace(/(([iışğüçö]))/g, (letter) => {
return letters[letter];
});
return string.toUpperCase();
}
/**
* Creates an array of unique values
* @param array - The arrays to inspect
*/
static union(...array) {
const newFlatArray = [...array].flat(Infinity);
const filter = (item, pos) => {
return newFlatArray.indexOf(item) === pos;
};
return newFlatArray.filter(filter);
}
/**
* Find index of given value inside array
* Usage:
* @param array - source array
* @param value - variable will be find index
* @returns - Array<number>
*/
static findAllIndex(array, value) {
const method = (a, e, i) => {
if (e === value) {
a.push(i);
}
return a;
};
return array.reduce(method, []);
}
/**
* Remove character from given string with given count
* Usage: Util.removeCharsBetween('serkan', 3, 2);
* @param value - String value will be split
* @param start - start position, 0 (zero) is first char
* @param count - how much char will be get
*/
static removeCharsBetween(value, start, count = 1) {
const str = value.split('');
str.splice(start, count);
return str.join('');
}
}
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
const moment = momentNs;
let selectionStart;
/**
* An input mask is a string of characters that indicates the format of valid input values. You can help
* people enter data correctly into input by providing input masks for fields that contain data that is
* always formatted a certain way. For example, you can use an input mask to make
* sure that people enter correctly formatted phone numbers into a phone number field.
*
* __Usage Example:__
*
* <input [(ngModel)]="tourDate" masker />
*
* For __Time__ correction example, this will be check for HH:mm format:
* ```html
* <input
* logoMask
* [regexp]="'^[0-2]{1}$|^[0-2]{1}[0-9]{1}$|^[0-2]{1}[0-9]{1}[0-5]{1}$|^[0-2]{1}[0-9]{1}[0-5]{1}[0-9]{1}$'"
* [placeholder]="HH:mm"
* />
* ```
* @stacked-example(MaskDirective, logo/core-sample/mask-directive-showcase/mask-directive-showcase.component)
* For __Date__ correction example, this will be check for YYYY-MM-DD format:
* ```html
* <input
* logoMask
* [placeholder]="'YYYY-MM-DD'"
* [regexp]="'^\\d+$'"
* />
* ```
*
* Full usage example with contains conditions:
*
* ```html
* <input
* logoMask
* [(ngModel)]="value"
* (change)="onDateChangeHandler($event)"
* (click)="onInputClick($event)"
* [placeholder]="'XX-00000'"
* [conditions]="[{cases: [{position: 2, regexp:'^[0-9]$'}], placeholder: 'X-0000000000'}]"
* [case]="'lower'"
* [regexp]="'^X{1,2}$|^X{1,2}[0-9]*$'"
* [maskType]="'date'"
* #dateRef
* />
* ```
*
* __Another Example:__
* ```html
* <input
* logoMask
* [placeholder]="'XX-0000000000'"
* [conditions]="[{cases: [{position: 2, regexp: '^[0-9]$'}], placeholder: 'X-0000000000'}]"
* [regexp]="'^[A-ZĞÜŞİÖÇ]{1,2}$|^[A-ZĞÜŞİÖÇ]{1,2}[0-9]*$'"
* [case]="'upper'"
* />
* ```
*/
class MaskDirective {
constructor(elementRef) {
this.elementRef = elementRef;
/**
* Case use for upper or lower case selection
* For example [case]="'lower'" it makes all char to lowercase
*/
this.case = null; // "upper|lower"
/**
* Conditions uses for set special status different than defined placeholder.
* If placeholder set to 'XX-00000' and 'X-00000' also acceptable you need this property
* For example [conditions]="[{cases: [{position: 2, regexp:'^[0-9]$'}], placeholder: 'X-0000000000'}]"
* With this at 2 position if inserted char is a digit (regexp) then placeholder will be redefine to 'X-0000000000'
*/
this.conditions = [];
this.ngModelChange = new EventEmitter();
this.oldValue = '';
this.defaultChars = '^\\wğüşıöçĞÜŞİÖÇ';
}
/**
* This propert removes inserted char if format not same with defined pattern.
* For example [regexp]="'^9{1,3}$|^9{3}[0-9]*$'"
* Above example just accepts beginning 999 then accept digits like 999123456
*/
get regexp() {
return this._regexp;
}
set regexp(value) {
this._regexp = value;
}
/**
* Used for format check. What format will be used for display text.
* if need some special chars like "- / or space" this will be looks their position
* and will be added automatically
* For example : [placeholder] = {TK-1234} This format will be add "-" char automatically to third cursor position.
* And also will restrict insert more than char length to textbox.
*/
get placeholder() {
return this._placeholder;
}
set placeholder(value) {
this._placeholder = value;
if (typeof value !== 'undefined' && this.input) {
this.setPlaceholder(value);
}
if (!this.maxLength) {
this.maxLength = this.placeholder.length;
}
}
/**
* This property used for definition of acceptable max char length of the input field
* For example, [maxLength]='13' it sets the input file's acceptable chars length to max 13
*/
get maxLength() {
return this._maxLength;
}
set maxLength(value) {
const length = this.elementRef.nativeElement.maxLength;
const maxLength = length ? length : this._placeholder.length;
this._maxLength = (typeof value !== 'undefined' && value !== null) ? value : maxLength;
if (value && this.input) {
this.setInputAttributes();
}
}
get extendedChars() {
return this._extendedChars;
}
set extendedChars(value) {
this._extendedChars = value;
if (typeof value !== 'undefined' && this.input) {
this.setPlaceholder(this.placeholder);
}
}
ngOnInit() {
this.input = this.elementRef.nativeElement;
if (this._placeholder) {
this.setPlaceholder(this._placeholder);
}
}
setPlaceholder(placeholder) {
let specialChars;
this.acceptedChars = `[${this.defaultChars}${this._extendedChars}]`;
specialChars = placeholder.match(new RegExp(this.acceptedChars, 'g'));
this.list = specialChars && Util.union(specialChars).map((value) => {
'use strict';
return { what: value, position: Util.findAllIndex(placeholder.split(''), value) };
});
this.setInputAttributes();
}
setInputAttributes() {
this.input.setAttribute('maxLength', this._maxLength);
this.input.setAttribute('placeholder', this._placeholder);
}
clear(value) {
return value.replace(new RegExp(this.acceptedChars, 'g'), ''); // Removes every non-digit character;
}
isValid(value) {
const convertDate = new Date(value);
return Object.prototype.toString.call(convertDate) === '[object Date]' && !isNaN(convertDate.getTime());
}
onFocus($event) {
this.oldValue = this.input.value;
}
onBlur($event) {
if (this.maskType === 'date' && !this.isValid(this.input.value)) {
this.emit(this.oldValue);
}
}
onKeyDown($event) {
selectionStart = this.input.selectionStart;
if ($event.keyCode === 13) {
if (this.maskType === 'date' && !this.isValid(this.input.value)) {
this.emit(this.oldValue);
}
}
}
emit(value) {
this.input.value = value;
this.oldValue = value;
this.ngModelChange.emit(value);
}
conditionCheck() {
const clear = this.clear(this.input.value);
if (this.conditions.length > 0) {
this.conditions.forEach(condition => {
const status = condition.cases.every(item => {
if (clear[item.position - 1]) {
const isTrue = new RegExp(item.regexp, 'gi').test(clear[item.position - 1]);
selectionStart = isTrue ? selectionStart + 1 : selectionStart;
return isTrue;
}
return false;
});
const placehoder = status ? condition.placeholder : this._placeholder;
this.setPlaceholder(placehoder);
});
}
}
mask(value) {
const clear = this.clear(value);
return clear.replace(/./g, (val, index) => {
let specialChar = 0;
if (this.list) {
this.list.forEach(item => {
'use strict';
item.position.forEach((position) => {
val = (index === (position - 1 - specialChar)) ? val + item.what : val;
specialChar++;
});
});
}
return val;
});
}
onInput($event) {
let value, newValue;
switch (this.case) {
case 'lower':
value = Util.turkishToLower(this.input.value);
break;
case 'upper':
value = Util.turkishToUpper(this.input.value);
break;
default:
value = this.input.value;
break;
}
const isTrue = new RegExp(this._regexp).test(this.clear(value));
const insertedCharLength = this.input.selectionEnd - selectionStart;
if (!isTrue) {
$event.preventDefault();
this.emit(Util.removeCharsBetween(value, selectionStart, insertedCharLength));
this.input.setSelectionRange(selectionStart, selectionStart);
return;
}
if ($event.data || $event.inputType === 'insertFromPaste') {
this.conditionCheck();
newValue = this.mask(value);
if (this.maskType === 'date' && !moment(newValue).isValid() && this._maxLength === this.input.value) {
this.emit(this.oldValue);
}
else {
this.emit(newValue);
}
if (this.input.value.length !== this._maxLength) {
if (this.list) {
this.list.map(item => item.position).join().split(',').map(item => {
if (Number(item) >= selectionStart + 1 && selectionStart + insertedCharLength >= Number(item)) {
selectionStart = selectionStart + 1;
}
});
}
this.input.setSelectionRange(selectionStart + insertedCharLength, selectionStart + insertedCharLength);
}
}
}
}
MaskDirective.decorators = [
{ type: Directive, args: [{
selector: '[logoMask]',
providers: [NgModel],
},] }
];
MaskDirective.ctorParameters = () => [
{ type: ElementRef }
];
MaskDirective.propDecorators = {
ngModel: [{ type: Input }],
maskType: [{ type: Input }],
case: [{ type: Input }],
conditions: [{ type: Input }],
ngModelChange: [{ type: Output }],
regexp: [{ type: Input }],
placeholder: [{ type: Input }],
maxLength: [{ type: Input }],
extendedChars: [{ type: Input }],
onFocus: [{ type: HostListener, args: ['focus', ['$event'],] }],
onBlur: [{ type: HostListener, args: ['blur', ['$event'],] }],
onKeyDown: [{ type: HostListener, args: ['keydown', ['$event'],] }],
onInput: [{ type: HostListener, args: ['input', ['$event'],] }]
};
/**
* @license
* Copyright LOGO YAZILIM SANAYİ VE TİCARET A.Ş. All Rights Reserved.
*
* Save to the extent permitted by law, you may not use, copy, modify,
* distribute or create derivative works of this material or any part
* of it without the prior written consent of LOGO YAZILIM SANAYİ VE TİCARET A.Ş. Limited.
* Any reproduction of this material must contain this notice.
*/
/**
* Timepicker helps users select and set a specific time in your timesheet in 24-hour format.
* It comes many features
*
* @stacked-example(TimepickerComponent, logo/timepicker-sample/timepicker-showcase/timepicker-showcase.component)
*
* ### Installation
*
* All public npm packages of Logo Software is at [https://www.npmjs.com/~logofe](https://www.npmjs.com/~logofe). To
* install Timepicker Module:
*
* ```bash
* $ npm set registry https://registry.npmjs.org/
* $ npm install @logo-software/timepicker -s
* ```
*
* Just import it to your project of `@NgModule` import section.
*
* ```typescript
* import { TimepickerModule } from '@logo-software/timepicker';
*
* @NgModule({
* imports: [CommonModule, TimepickerModule],
* })
* export class AppModule {
* }
* ```
*/
class TimepickerModule {
}
TimepickerModule.decorators = [
{ type: NgModule, args: [{
declarations: [TimepickerComponent, MaskDirective],
imports: [FormsModule, CommonModule, PopoverModule],
exports: [TimepickerComponent],
},] }
];
/*
* Public API Surface of timepicker
*/
/**
* Generated bundle index. Do not edit.
*/
export { IconPosition, Sizes, TimepickerComponent, TimepickerModule, MaskDirective as ɵa };
//# sourceMappingURL=logo-software-timepicker.js.map