ps-toolkit-ui 0.0.198 → 0.0.202

package/bundles/ps-toolkit-ui.umd.js

@@ -232,10 +232,23 @@
                 FileSelected: '{} فایل انتخاب شده ({})',
                 Selected: 'انتخاب شده',
                 Limit: 'محدودیت',
+                Today: 'امروز : {}',
                 SendCodeLimit: 'محدودیت در ارسال کد',
                 SendCodeError: 'خطا در ارسال کد',
                 CodeNotFound: 'کد تایید ارسال نشده است',
                 Total: 'جمع کل',
+                Month1: 'فروردین',
+                Month2: 'اردیبهشت',
+                Month3: 'خرداد',
+                Month4: 'تیر',
+                Month5: 'مرداد',
+                Month6: 'شهریور',
+                Month7: 'مهر',
+                Month8: 'آبان',
+                Month9: 'آذر',
+                Month10: 'دی',
+                Month11: 'بهمن',
+                Month12: 'اسفند',
                 Day: 'روز',
                 HourP: '{} ساعت',
                 MinuteP: '{} دقیقه',
@@ -1691,6 +1704,7 @@
             this.environment = null;
             this.url = null;
             this.urlNewTab = false;
+            this.addNew = false;
             this.description = null;
             this.disabled = false;
             this.inEditDisabled = false;
@@ -4890,7 +4904,8 @@
             };
             this.inp.isValid = function () {
                 _this.inp.error = null;
-                if (_this.inp.required && ((!_this.inp.multiple && !_this.inp.value) || (_this.inp.multiple && _this.getSelected().length === 0))) {
+                if (_this.inp.required && ((!_this.inp.multiple && ((_this.inp.addNew && !_this.inp.search) || (!_this.inp.addNew && !_this.inp.value))) ||
+                    (_this.inp.multiple && _this.getSelected().length === 0))) {
                     _this.inp.error = exports.InputError.Required;
                     return false;
                 }
@@ -4912,7 +4927,7 @@
                 }
             };
             this.inp.data = function () {
-                return !_this.inp.multiple ? _this.inp.value : _this.getSelected();
+                return !_this.inp.multiple ? (_this.inp.addNew ? _this.inp.search : _this.inp.value) : _this.getSelected();
             };
             this.inp.focusOut = function () {
                 $__namespace(_this.inputBase.nativeElement).blur();
@@ -4941,7 +4956,9 @@
                 $__namespace(_this.inputDiv.nativeElement).removeClass('top');
                 _this.inp.hover = -1;
                 if (_this.inp.value === null) {
-                    _this.inp.search = '';
+                    if (!_this.inp.addNew) {
+                        _this.inp.search = '';
+                    }
                     if (_this.inp.type === exports.InputType.SelectAutoComplete) {
                         _this.inp.options = [];
                     }
@@ -6094,7 +6111,7 @@
         { type: core.Component, args: [{
                     selector: 'lib-notfound',
                     template: "<div id=\"Notfound\">\r\n  <div class=\"notfound-con\">\r\n    <i class=\"far fa-frown notfound-icon\"></i>\r\n    <div class=\"notfound\">404</div>\r\n    <div class=\"notfound-text\">{{l(\"Text\")}}</div>\r\n    <div class=\"notfound-btn\">\r\n      <lib-form-button [inp]=\"back\"></lib-form-button>\r\n    </div>\r\n  </div>\r\n</div>\r\n",
-                    styles: ["#Notfound{align-items:center;background-color:#fff;display:flex;float:right;justify-content:center;min-height:calc(100vh - 90px);position:relative;width:100%}#Notfound .notfound-con{border-radius:5px;float:right;height:100%;width:100%}#Notfound .notfound-con .notfound{float:right;font-family:VazirBold;font-size:60px;height:100px;line-height:120px;position:relative;text-align:center;width:100%;z-index:2}#Notfound .notfound-con .notfound-text{float:right;font-family:VazirLight;font-size:16px;height:40px;line-height:40px;position:relative;text-align:center;width:100%;z-index:2}#Notfound .notfound-con .notfound-btn{float:right;margin-right:40%;margin-top:15px;position:relative;width:20%;z-index:2}#Notfound .notfound-con .notfound-icon{color:var(--base-33);float:right;font-size:150px;text-align:center;width:100%}@media (max-width:399.99px){#Notfound .notfound-con{right:5%;width:90%}#Notfound .notfound-con .notfound{font-size:90px}#Notfound .notfound-con .notfound-text{font-size:14px}#Notfound .notfound-con .notfound-icon{font-size:300px;left:-90px}}@media (min-width:400px) and (max-width:499.99px){#Notfound .notfound-con{right:5%;width:90%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media (min-width:500px) and (max-width:599.99px){#Notfound .notfound-con{right:5%;width:90%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media (min-width:600px) and (max-width:699.99px){#Notfound .notfound-con{right:10%;width:80%}#Notfound .notfound-con .notfound{font-size:120px}#Notfound .notfound-con .notfound-text{font-size:17px}}"]
+                    styles: ["#Notfound{align-items:center;background-color:#fff;display:flex;float:right;justify-content:center;min-height:calc(100vh - 125px);position:relative;width:100%}#Notfound .notfound-con{border-radius:5px;float:right;height:100%;width:100%}#Notfound .notfound-con .notfound{float:right;font-family:VazirBold;font-size:60px;height:100px;line-height:120px;position:relative;text-align:center;width:100%;z-index:2}#Notfound .notfound-con .notfound-text{float:right;font-family:VazirLight;font-size:16px;height:40px;line-height:40px;position:relative;text-align:center;width:100%;z-index:2}#Notfound .notfound-con .notfound-btn{float:right;margin-right:40%;margin-top:15px;position:relative;width:20%;z-index:2}#Notfound .notfound-con .notfound-icon{color:var(--base-33);float:right;font-size:150px;text-align:center;width:100%}@media (max-width:399.99px){#Notfound .notfound-con{right:5%;width:90%}#Notfound .notfound-con .notfound{font-size:90px}#Notfound .notfound-con .notfound-text{font-size:14px}#Notfound .notfound-con .notfound-icon{font-size:300px;left:-90px}}@media (min-width:400px) and (max-width:499.99px){#Notfound .notfound-con{right:5%;width:90%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media (min-width:500px) and (max-width:599.99px){#Notfound .notfound-con{right:5%;width:90%}#Notfound .notfound-con .notfound{font-size:110px}#Notfound .notfound-con .notfound-text{font-size:16px}#Notfound .notfound-con .notfound-icon{font-size:380px}}@media (min-width:600px) and (max-width:699.99px){#Notfound .notfound-con{right:10%;width:80%}#Notfound .notfound-con .notfound{font-size:120px}#Notfound .notfound-con .notfound-text{font-size:17px}}"]
                 },] }
     ];
     NotfoundComponent.ctorParameters = function () { return [
@@ -7031,6 +7048,133 @@
         inp: [{ type: core.Input }]
     };
 
+    var CalendarComponent = /** @class */ (function () {
+        function CalendarComponent(config) {
+            this.config = config;
+            this.state = 'day';
+            this.months = [];
+            this.previousDays = [];
+            this.nextDays = [];
+            this.days = [];
+            var lang = new LangClass(config.currentLang, config.strings);
+            this.l = function (key, v) {
+                if (v === void 0) { v = null; }
+                return lang.get('Public', null, key, v);
+            };
+            this.months = [this.l('Month1'), this.l('Month2'), this.l('Month3'), this.l('Month4'), this.l('Month5'), this.l('Month6'), this.l('Month7'), this.l('Month8'), this.l('Month9'), this.l('Month10'), this.l('Month11'), this.l('Month12')];
+            this.setActive(moment__namespace());
+        }
+        CalendarComponent.prototype.changeState = function (s) {
+            this.state = s;
+        };
+        CalendarComponent.prototype.getYears = function () {
+            var y = parseInt(this.active.format('jYYYY'), 10);
+            var sy = y - (y % 20);
+            return Array.from({ length: 20 }, function (x, i) { return sy + i; });
+        };
+        CalendarComponent.prototype.getActiveMonth = function () {
+            return this.months[parseInt(this.active.format('jM'), 10) - 1];
+        };
+        CalendarComponent.prototype.add = function (c) {
+            this.active.add(c, this.state === 'day' ? 'month' : 'year');
+            this.setDate();
+        };
+        CalendarComponent.prototype.changeMonth = function (c) {
+            this.active = moment__namespace(this.active.format('jYYYY') + '/' + ('0' + c).slice(-2) + '/' + this.active.format('jDD HH:mm:ss'), 'jYYYY/jMM/jDD HH:mm:ss');
+            this.setDate();
+            this.changeState('day');
+        };
+        CalendarComponent.prototype.changeYear = function (c) {
+            this.active = moment__namespace(('000' + c).slice(-4) + '/' + this.active.format('jMM/jDD HH:mm:ss'), 'jYYYY/jMM/jDD HH:mm:ss');
+            this.setDate();
+            this.changeState('month');
+        };
+        CalendarComponent.prototype.setDate = function () {
+            var n = this.active.clone();
+            var countDayInMonth = n.daysInMonth();
+            var startWeek = parseInt(n.startOf('month').format('d'), 10);
+            var previousMonth = n.subtract(1, 'month');
+            var countDayInPreviousMonth = previousMonth.daysInMonth();
+            var nextMonth = n.add(2, 'month');
+            var previousDays = [];
+            var nextDays = [];
+            var days = [];
+            if (startWeek !== 6) {
+                for (var i = countDayInPreviousMonth - startWeek; i <= countDayInPreviousMonth; i++) {
+                    previousDays.push(new DayClass(i, this.isToday(previousMonth, i), false));
+                }
+            }
+            for (var i = 1; i <= countDayInMonth; i++) {
+                days.push(new DayClass(i, this.isToday(this.active, i), false));
+            }
+            var end = (days.length + previousDays.length) % 7;
+            if (end !== 0) {
+                for (var i = 1; i <= 7 - end; i++) {
+                    nextDays.push(new DayClass(i, this.isToday(nextMonth, i), false));
+                }
+            }
+            this.previousDays = previousDays;
+            this.nextDays = nextDays;
+            this.days = days;
+        };
+        CalendarComponent.prototype.isToday = function (m, d) {
+            var month = parseInt(m.format('jMM'), 10);
+            var year = parseInt(m.format('jYYYY'), 10);
+            return year === this.todayYear && month === this.todayMonth && d === this.todayDay;
+        };
+        CalendarComponent.prototype.setActive = function (m) {
+            this.active = m;
+            this.todayDay = parseInt(this.active.format('jDD'), 10);
+            this.todayMonth = parseInt(this.active.format('jMM'), 10);
+            this.todayYear = parseInt(this.active.format('jYYYY'), 10);
+            this.setDate();
+        };
+        return CalendarComponent;
+    }());
+    CalendarComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'lib-calendar',
+                    template: "<div id=\"Calendar\">\r\n  <div class=\"title\">{{l('Today', this.active.format('dddd jDD jMMMM jYYYY'))}}</div>\r\n  <div class=\"header\">\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? -1 : -20)\" class=\"fas fa-angle-right previous-month\"></i>\r\n    <div class=\"title\">\r\n      <div (click)=\"(state === 'day' || state === 'month') && changeState('year')\" class=\"year header-item\">\r\n        {{active.format('jYYYY')}}\r\n      </div>\r\n      <div (click)=\"state === 'day' && changeState('month')\" class=\"month header-item\">\r\n        {{getActiveMonth()}}\r\n      </div>\r\n    </div>\r\n    <i (click)=\"add(state === 'day' || state === 'month' ? 1 : 20)\" class=\"fas fa-angle-left next-month\"></i>\r\n  </div>\r\n  <div [style]=\"state === 'day' ? {} : {display: 'none'}\" class=\"days-con\">\r\n    <div class=\"day-names underline\">\r\n      <div class=\"item\">\u0634</div>\r\n      <div class=\"item\">\u06CC</div>\r\n      <div class=\"item\">\u062F</div>\r\n      <div class=\"item\">\u0633</div>\r\n      <div class=\"item\">\u0686</div>\r\n      <div class=\"item\">\u067E</div>\r\n      <div class=\"item\">\u062C</div>\r\n    </div>\r\n    <div class=\"days\">\r\n      <div [className]=\"'item not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of previousDays\">{{d.day}}</div>\r\n      <div [className]=\"'item' + (d.today ? ' today' : '') + (d.selected ? ' selected' : '')\" *ngFor=\"let d of days\">{{d.day}}</div>\r\n      <div [className]=\"'item not-in-month' + (d.today ? ' today' : '')\" *ngFor=\"let d of nextDays\">{{d.day}}</div>\r\n    </div>\r\n  </div>\r\n  <div [style]=\"state === 'month' ? {} : {display: 'none'}\" class=\"months-con\">\r\n    <div [className]=\"(i + 1 == active.format('jM') ? 'selected ' : '') + 'month'\" (click)=\"changeMonth(i + 1)\" *ngFor=\"let m of months; let i = index\">{{m}}</div>\r\n  </div>\r\n  <div [style]=\"state === 'year' ? {} : {display: 'none'}\" class=\"years-con\">\r\n    <div [className]=\"(y == active.format('jYYYY') ? 'selected ' : '') + 'year'\" (click)=\"changeYear(y)\" *ngFor=\"let y of getYears()\">{{y}}</div>\r\n  </div>\r\n</div>\r\n",
+                    styles: ["#Calendar{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;background-color:#fff;border-radius:5px;box-shadow:0 1px 3px 0 rgba(0,0,0,.4);float:right;margin-right:5%;position:relative;width:40%;z-index:4}#Calendar>.title{font-family:VazirBold;line-height:40px;text-align:center}#Calendar .days-con,#Calendar .header,#Calendar>.title{float:right;width:100%}#Calendar .header{background:var(--black-33)}#Calendar .header .next-month,#Calendar .header .previous-month{cursor:pointer;float:right;font-size:15px;height:40px;line-height:40px;text-align:center;width:30px}#Calendar .header .next-month:hover,#Calendar .header .previous-month:hover{background:var(--black-33)}#Calendar .header .title{float:right;font-family:VazirBold;font-size:12px;height:40px;text-align:center;width:calc(100% - 60px)}#Calendar .header .header-item{background-color:#fff;border-radius:5px;box-shadow:var(--box-shadow);cursor:pointer;float:right;height:30px;line-height:30px;margin-right:5px;margin-top:5px;text-align:center}#Calendar .header .header-item:hover{background-color:var(--base-11)}#Calendar .header .header-item.year{width:calc(40% - 10px)}#Calendar .header .header-item.month{width:calc(60% - 10px)}#Calendar .days-con .day-names{float:right;font-family:VazirLight;font-size:12px;position:relative;text-align:center;width:100%}#Calendar .days-con .day-names .item{float:right;font-size:12px;height:25px;line-height:25px;text-align:center;width:14.28571%}#Calendar .days-con .days{float:right;font-size:12px;height:300px;text-align:center;width:100%}#Calendar .days-con .days .item{cursor:pointer;float:right;font-size:14px;height:50px;line-height:50px;text-align:center;width:14.28571%}#Calendar .days-con .days .item.not-in-month{cursor:default;opacity:.5}#Calendar .days-con .days .item:hover{background-color:var(--black-33)}#Calendar .days-con .days .item.not-in-month:hover{background-color:unset}#Calendar .days-con .days .item.today{background-color:var(--comp);color:#fff}#Calendar .days-con .days .item.today.not-in-month:hover{background-color:var(--black-33)}#Calendar .months-con{float:right;height:325px;width:100%}#Calendar .months-con .month{cursor:pointer;float:right;font-size:13px;height:81.25px;line-height:81.25px;text-align:center;width:33.33333%}#Calendar .months-con .month.selected,#Calendar .months-con .month:hover{background-color:var(--black-33)}#Calendar .years-con{float:right;width:100%}#Calendar .years-con .year{cursor:pointer;float:right;font-size:13px;height:65px;line-height:65px;text-align:center;width:25%}#Calendar .years-con .year.selected,#Calendar .years-con .year:hover{background-color:var(--black-33)}"]
+                },] }
+    ];
+    CalendarComponent.ctorParameters = function () { return [
+        { type: PsToolkitUiConfigService }
+    ]; };
+
+    var ClockComponent = /** @class */ (function () {
+        function ClockComponent() {
+            this.active = moment__namespace();
+        }
+        ClockComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.clockInterval = setInterval(function () {
+                _this.clockUpdate();
+            }, 1000);
+        };
+        ClockComponent.prototype.ngOnDestroy = function () {
+            clearInterval(this.clockInterval);
+        };
+        ClockComponent.prototype.clockUpdate = function () {
+            this.active = this.active.add(1, 'second');
+            document.getElementById('hour').style.transform = 'rotate(' + (this.active.get('hour') * 30 + (Math.floor(this.active.get('minute') / 12) * 6)) + 'deg)';
+            document.getElementById('minute').style.transform = 'rotate(' + (this.active.get('minute') * 6) + 'deg)';
+            document.getElementById('second').style.transform = 'rotate(' + (this.active.get('second') * 6) + 'deg)';
+        };
+        return ClockComponent;
+    }());
+    ClockComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'lib-clock',
+                    template: "<div id=\"ClockCon\">\r\n  <div id=\"clock\">\r\n    <b></b>\r\n    <span></span>\r\n    <span></span>\r\n    <i id=\"hour\"></i>\r\n    <i id=\"minute\"></i>\r\n    <i id=\"second\"></i>\r\n  </div>\r\n</div>\r\n",
+                    styles: ["#ClockCon #clock{-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;border-radius:5px;float:left;padding:20px;position:relative;width:30%;z-index:4}#ClockCon #clock #clock{background-color:#fff;border:.0625em solid var(--black-33);border-radius:50%;box-shadow:inset .125em .25em .5em var(--black-33),-.25em -.5em .5em var(--black-33),0 0 .0625em .5em var(--black-33),0 0 .0625em .5625em var(--black-33),.125em .25em .5em .5em var(--black-33);height:10em;line-height:1.5em;margin:1em auto;position:relative;transform:scale(1.5);width:10em}#ClockCon #clock #clock *,#ClockCon #clock #clock :after,#ClockCon #clock #clock :before{background-clip:padding-box;box-sizing:border-box}#ClockCon #clock #clock:after,#ClockCon #clock #clock:before,#ClockCon #clock #clock b:after,#ClockCon #clock #clock b:before{position:absolute;text-align:center;width:1.5em}#ClockCon #clock #clock b{position:absolute;top:4.25em;width:100%}#ClockCon #clock #clock:after,#ClockCon #clock #clock:before{left:4.25em}#ClockCon #clock #clock:before{content:\"12\";top:0}#ClockCon #clock #clock:after{bottom:0;content:\"6\"}#ClockCon #clock #clock b:before{content:\"9\";left:0}#ClockCon #clock #clock b:after{content:\"3\";right:0}#ClockCon #clock #clock span{height:100%;left:4.9375em;position:absolute;top:0;width:.125em}#ClockCon #clock #clock span+span{transform:rotate(90deg)}#ClockCon #clock #clock i,#ClockCon #clock #clock span:after,#ClockCon #clock #clock span:before{height:9em;left:0;position:absolute;top:.5em;width:100%}#ClockCon #clock #clock span:after,#ClockCon #clock #clock span:before{border-color:#000;border-style:solid;border-width:.5em 0;content:\"\";transform:rotate(30deg)}#ClockCon #clock #clock span:after{transform:rotate(60deg)}#ClockCon #clock #clock i{background-color:#000;border:solid transparent;border-radius:40%;border-width:0 0 3em;left:4.85em;width:.3em;z-index:2}#ClockCon #clock #clock i:first-of-type{border-width:1.5em 0 3em}#ClockCon #clock #clock i:last-of-type{background-color:var(--comp)}#ClockCon #clock #clock i:last-of-type:after,#ClockCon #clock #clock i:last-of-type:before{border-radius:50%;content:\"\";position:absolute}#ClockCon #clock #clock i:last-of-type:before{background:#000;height:1em;left:-.375em;top:4em;width:1em}#ClockCon #clock #clock i:last-of-type:after{background:#abc;height:.5em;left:-.125em;top:4.25em;width:.5em}"]
+                },] }
+    ];
+    ClockComponent.ctorParameters = function () { return []; };
+    ClockComponent.propDecorators = {
+        clock: [{ type: core.ViewChild, args: ['clock',] }]
+    };
+
     var PsToolkitUiModule = /** @class */ (function () {
         function PsToolkitUiModule() {
         }
@@ -7053,7 +7197,8 @@
                         FormFileComponent, FormSelectComponent, FormTableComponent, FormLabelComponent, AccordionComponent, FormRadioComponent, HeaderComponent,
                         TooltipComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent, FormTreeComponent, AlertComponent,
                         FormTimeComponent, NotfoundComponent, FormFingerComponent, FormCarSearchComponent, FormCarComponent, TableReportComponent,
-                        SafeStylePipe, LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent
+                        SafeStylePipe, LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent, CalendarComponent,
+                        ClockComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -7068,7 +7213,8 @@
                         FormFileComponent, FormSelectComponent, FormTableComponent, FormLabelComponent, AccordionComponent, FormRadioComponent, HeaderComponent,
                         TooltipComponent, ConfirmComponent, TableComponent, ModalComponent, FormComponent, TableRowComponent, FormTreeComponent, AlertComponent,
                         FormTimeComponent, NotfoundComponent, FormFingerComponent, FormCarSearchComponent, FormCarComponent, TableReportComponent,
-                        LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent
+                        LoginComponent, LoadingComponent, NotificationComponent, LayoutComponent, FormHiddenComponent, CalendarComponent,
+                        ClockComponent
                     ]
                 },] }
     ];
@@ -7473,6 +7619,8 @@
     exports.ɵj = LoginComponent;
     exports.ɵk = NotificationComponent;
     exports.ɵl = FormHiddenComponent;
+    exports.ɵm = CalendarComponent;
+    exports.ɵn = ClockComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });