angular-nepali-datepicker/angular-nepali-datepicker.metadata.json

Simple Nepali datepicker component for angular applications

{"__symbolic":"module","version":4,"metadata":{"NpDatepickerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":6,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"DatepickerComponent"},{"__symbolic":"reference","name":"ToNpPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":8,"character":12},{"__symbolic":"reference","module":"@angular/cdk/overlay","name":"OverlayModule","line":8,"character":26}],"exports":[{"__symbolic":"reference","name":"DatepickerComponent"}]}]}],"members":{}},"DatepickerComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"np-datepicker","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":24,"character":15},"useExisting":{"__symbolic":"reference","name":"DatepickerComponent"},"multi":true}],"encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":29,"character":17},"member":"None"},"template":"<input\r\n    class=\"datepicker__input\"\r\n    type=\"text\"\r\n    [value]=\"formattedDate | toNp: language\"\r\n    [ngClass]=\"inputClass\"\r\n    #origin=\"cdkOverlayOrigin\"\r\n    cdk-overlay-origin\r\n    (focus)=\"open()\"\r\n    (keydown)=\"$event.preventDefault()\"\r\n    aria-hidden=\"true\"\r\n    [hidden]=\"hideInput\">\r\n<ng-template\r\n    cdk-connected-overlay\r\n    cdkConnectedOverlayLockPosition\r\n    cdkConnectedOverlayHasBackdrop\r\n    cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n    [cdkConnectedOverlayOrigin]=\"origin\"\r\n    [cdkConnectedOverlayOpen]=\"isOpen\"\r\n    (backdropClick)=\"close()\"\r\n    (detach)=\"close()\">\r\n  <ng-container [ngTemplateOutlet]=\"dp\"></ng-container>\r\n</ng-template>\r\n\r\n<ng-container [ngTemplateOutlet]=\"dp\" *ngIf=\"alwaysVisible\"></ng-container>\r\n\r\n<ng-template #dp>\r\n  <div class=\"datepicker__container\">\r\n    <div class=\"datepicker__options-container\">\r\n      <span class=\"datepicker__options-year-container\">\r\n        <span>\r\n          {{'Year' | toNp : language : 'word'}}:\r\n        </span>\r\n        <select (change)=\"selectYear($event.target.value)\">\r\n          <option\r\n              *ngFor=\"let year of years\"\r\n              [value]=\"year\"\r\n              [selected]=\"year === currentNepaliDate?.year\">\r\n            {{year | toNp: language }}\r\n          </option>\r\n        </select>\r\n      </span>\r\n      <span class=\"datepicker__options-month-container\">\r\n        <span>{{'Month' | toNp : language : 'word'}}: </span>\r\n        <select (change)=\"selectMonth($event.target.value)\">\r\n          <option\r\n              *ngFor=\"let month of monthsMapping[language][monthDisplayType]; index as i\"\r\n              [value]=\"month\"\r\n              [selected]=\"i === currentNepaliDate?.month\">\r\n            {{month}}\r\n          </option>\r\n        </select>\r\n      </span>\r\n    </div>\r\n    <div class=\"datepicker__days-container\">\r\n      <div class=\"datepicker__days\" *ngFor=\"let day of daysMapping[language][dayDisplayType]; index as i\">\r\n        <div class=\"datepicker__weekday\">{{day}}</div>\r\n        <div class=\"datepicker__date-container\" *ngFor=\"let date of currentMonthData[i]\">\r\n          <div\r\n              class=\"datepicker__date\"\r\n              [class.datepicker__date--active]=\"\r\n                date === selectedDate?.day &&\r\n                currentNepaliDate.month === selectedDate?.month &&\r\n                currentNepaliDate.year === selectedDate?.year\r\n              \"\r\n              [class.datepicker__date--current-day]=\"\r\n                date === nepaliDateToday.day &&\r\n                currentNepaliDate.month === nepaliDateToday.month &&\r\n                currentNepaliDate.year === nepaliDateToday.year\r\n              \"\r\n              [class.datepicker__date--disabled]=\"!date\"\r\n              (click)=\"selectDate(date)\">\r\n            <span *ngIf=\"!date\">&nbsp;</span>\r\n            {{date | toNp: language }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>","styles":[".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{position:absolute;pointer-events:auto;box-sizing:border-box;z-index:1000;display:flex;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}@media screen and (-ms-high-contrast:active){.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}.datepicker__input{display:block}.datepicker__container{--font-family:arial,sans-serif;--font-size:14px;--container-padding:8px 5px;--container-border-color:lightgray;--container-border:1px solid;--container-background-color:white;--select-height:24px;--option-margin:0 0 7px;--option-year-container-margin:0 10px 0;--days-size:40px;--weekday-margin:0 0 5px;--active-day-color:white;--active-day-background:#27a4f7;--hover-color:#27a4f7;--selected-color:#27a4f7;display:inline-block;font-family:\"arial, sans-serif\";font-family:var(--font-family);font-size:14px;font-size:var(--font-size);padding:8px 5px;padding:var(--container-padding);border:1px solid #d3d3d3;border:var(--container-border);border-color:var(--container-border-color);background-color:#fff;background-color:var(--container-background-color)}.datepicker__options-container{margin:0 0 7px;margin:var(--option-margin)}.datepicker__options-container select{height:24px;height:var(--select-height)}.datepicker__options-year-container{display:inline-block;margin:0 10px;margin:var(--option-year-container-margin)}.datepicker__days{display:inline-block;vertical-align:top;text-align:center;width:40px;width:var(--days-size)}.datepicker__weekday{margin:0 0 5px;margin:var(--weekday-margin);font-weight:700;text-align:center}.datepicker__date{width:40px;width:var(--days-size);height:40px;height:var(--days-size);line-height:40px;line-height:var(--days-size);cursor:pointer}.datepicker__date--active{color:#fff;color:var(--active-day-color);background:#27a4f7;background:var(--active-day-background)}.datepicker__date--current-day:not(.datepicker__date--active){color:#27a4f7;color:var(--selected-color);font-weight:700}.datepicker__date--disabled{pointer-events:none}.datepicker__date:hover:not(.datepicker__date--active){color:#27a4f7;color:var(--hover-color);transition:color .3s}"]}]}],"members":{"hideInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"alwaysVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"inputClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"language":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"monthDisplayType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":62,"character":3}}]}],"dayDisplayType":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":3}}]}],"dateFormatter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"setCurrentDate":[{"__symbolic":"method"}],"populateYears":[{"__symbolic":"method"}],"resetCurrentMonthData":[{"__symbolic":"method"}],"formatValue":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"setCurrentMonthData":[{"__symbolic":"method"}],"setMonthDataBefore":[{"__symbolic":"method"}],"setMonthDataAfter":[{"__symbolic":"method"}],"createEmptySpaces":[{"__symbolic":"method"}],"selectDate":[{"__symbolic":"method"}],"selectYear":[{"__symbolic":"method"}],"selectMonth":[{"__symbolic":"method"}],"toggleOpen":[{"__symbolic":"method"}],"open":[{"__symbolic":"method"}],"close":[{"__symbolic":"method"}]}},"ToNpPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":3,"character":1},"arguments":[{"name":"toNp"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"MonthData":{"__symbolic":"interface"},"NepaliDate":{"__symbolic":"interface"},"MonthMapping":{"__symbolic":"interface"},"DaysMapping":{"__symbolic":"interface"},"WordsMapping":{"__symbolic":"interface"},"DateFormatter":{"__symbolic":"interface"}},"origins":{"NpDatepickerModule":"./lib/angular-nepali-datepicker.module","DatepickerComponent":"./lib/datepicker/datepicker.component","ToNpPipe":"./lib/datepicker/to-np.pipe","MonthData":"./lib/datepicker/types","NepaliDate":"./lib/datepicker/types","MonthMapping":"./lib/datepicker/types","DaysMapping":"./lib/datepicker/types","WordsMapping":"./lib/datepicker/types","DateFormatter":"./lib/datepicker/types"},"importAs":"angular-nepali-datepicker"}