ps-toolkit-ui 0.0.203 → 0.0.204
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/ps-toolkit-ui.umd.js +2 -2
- package/bundles/ps-toolkit-ui.umd.min.js +1 -1
- package/bundles/ps-toolkit-ui.umd.min.js.map +1 -1
- package/esm2015/lib/components/calendar/calendar.component.js +1 -1
- package/esm2015/lib/components/clock/clock.component.js +1 -1
- package/fesm2015/ps-toolkit-ui.js +2 -2
- package/package.json +1 -1
- package/ps-toolkit-ui.metadata.json +1 -1
|
@@ -7135,7 +7135,7 @@
|
|
|
7135
7135
|
{ type: core.Component, args: [{
|
|
7136
7136
|
selector: 'lib-calendar',
|
|
7137
7137
|
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",
|
|
7138
|
-
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;
|
|
7138
|
+
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;position:relative;width:100%;z-index:4}#Calendar>.title{font-family:VazirBold;line-height:30px;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:30px;line-height:30px;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:30px;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:20px;line-height:20px;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{align-items:center;cursor:pointer;display:flex;float:right;font-size:13px;justify-content:center;padding-top:14.28571%;position:absolute;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)}"]
|
|
7139
7139
|
},] }
|
|
7140
7140
|
];
|
|
7141
7141
|
CalendarComponent.ctorParameters = function () { return [
|
|
@@ -7167,7 +7167,7 @@
|
|
|
7167
7167
|
{ type: core.Component, args: [{
|
|
7168
7168
|
selector: 'lib-clock',
|
|
7169
7169
|
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",
|
|
7170
|
-
styles: ["#ClockCon{float:right;position:relative}#ClockCon #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);
|
|
7170
|
+
styles: ["#ClockCon{float:right}#ClockCon,#ClockCon #clock{height:10em;position:relative;width:10em}#ClockCon #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);line-height:1.5em;transform:scale(.9)}#ClockCon #clock *,#ClockCon #clock :after,#ClockCon #clock :before{background-clip:padding-box;box-sizing:border-box}#ClockCon #clock:after,#ClockCon #clock:before,#ClockCon #clock b:after,#ClockCon #clock b:before{position:absolute;text-align:center;width:1.5em}#ClockCon #clock b{position:absolute;top:4.25em;width:100%}#ClockCon #clock:after,#ClockCon #clock:before{left:4.25em}#ClockCon #clock:before{content:\"12\";top:0}#ClockCon #clock:after{bottom:0;content:\"6\"}#ClockCon #clock b:before{content:\"9\";left:0}#ClockCon #clock b:after{content:\"3\";right:0}#ClockCon #clock span{height:100%;left:4.9375em;position:absolute;top:0;width:.125em}#ClockCon #clock span+span{transform:rotate(90deg)}#ClockCon #clock i,#ClockCon #clock span:after,#ClockCon #clock span:before{height:9em;left:0;position:absolute;top:.5em;width:100%}#ClockCon #clock span:after,#ClockCon #clock span:before{border-color:#000;border-style:solid;border-width:.5em 0;content:\"\";transform:rotate(30deg)}#ClockCon #clock span:after{transform:rotate(60deg)}#ClockCon #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 i:first-of-type{border-width:1.5em 0 3em}#ClockCon #clock i:last-of-type{background-color:var(--comp)}#ClockCon #clock i:last-of-type:after,#ClockCon #clock i:last-of-type:before{border-radius:50%;content:\"\";position:absolute}#ClockCon #clock i:last-of-type:before{background:#000;height:1em;left:-.375em;top:4em;width:1em}#ClockCon #clock i:last-of-type:after{background:#abc;height:.5em;left:-.125em;top:4.25em;width:.5em}"]
|
|
7171
7171
|
},] }
|
|
7172
7172
|
];
|
|
7173
7173
|
ClockComponent.ctorParameters = function () { return []; };
|