osl-base-extended 10.9.0 → 11.1.0
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.
|
@@ -2308,11 +2308,7 @@ class OslDatepicker {
|
|
|
2308
2308
|
dateValue = null;
|
|
2309
2309
|
_model = '';
|
|
2310
2310
|
set model(val) {
|
|
2311
|
-
this._model = val;
|
|
2312
|
-
// const clean = val?.includes('T') ? val.split('T')[0] : (val ?? '');
|
|
2313
|
-
// if (clean === this._model) return;
|
|
2314
|
-
// this._model = clean;
|
|
2315
|
-
// this.dateValue = clean ? this._toDate(clean) : null;
|
|
2311
|
+
this._model = val instanceof Date ? this._toString(val) : (val ?? '');
|
|
2316
2312
|
}
|
|
2317
2313
|
get model() { return this._model; }
|
|
2318
2314
|
dateType = 'date';
|
|
@@ -2344,6 +2340,13 @@ class OslDatepicker {
|
|
|
2344
2340
|
this.modelChange.emit(this._model);
|
|
2345
2341
|
this.changeEv.emit(this._model);
|
|
2346
2342
|
}
|
|
2343
|
+
onYearSelected(normalizedYear, datepicker) {
|
|
2344
|
+
const current = this._model ? this._toDate(this._model.split('T')[0]) : null;
|
|
2345
|
+
const updated = current ?? new Date();
|
|
2346
|
+
updated.setFullYear(normalizedYear.getFullYear());
|
|
2347
|
+
datepicker.close();
|
|
2348
|
+
this.onDateChange(updated);
|
|
2349
|
+
}
|
|
2347
2350
|
_toDate(str) {
|
|
2348
2351
|
const d = new Date(str + 'T00:00:00');
|
|
2349
2352
|
return isNaN(d.getTime()) ? null : d;
|
|
@@ -2359,11 +2362,11 @@ class OslDatepicker {
|
|
|
2359
2362
|
return localISO;
|
|
2360
2363
|
}
|
|
2361
2364
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2362
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatepicker, isStandalone: false, selector: "osl-datepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", dateType: "dateType", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n @if (label) {\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required ? '*' : ''}}</span>\r\n </label>\r\n </div>\r\n }\r\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <input\r\n class=\"date-input\"\r\n [matDatepicker]=\"picker\"\r\n [ngModel]=\"model\"\r\n \r\n (dateChange)=\"onDateChange($event.value)\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [min]=\"minDateObj\"\r\n [max]=\"maxDateObj\"\r\n [placeholder]=\"placeholder || 'DD/MMM/YYYY'\"\r\n [class.error]=\"myField.touched && myField.invalid\"\r\n #myField=\"ngModel\"\r\n >\r\n <mat-datepicker-toggle class=\"picker-toggle\" [for]=\"picker\" [disabled]=\"disabled\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker
|
|
2365
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatepicker, isStandalone: false, selector: "osl-datepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", dateType: "dateType", placeholder: "placeholder", minDate: "minDate", maxDate: "maxDate", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\r\n @if (label) {\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required ? '*' : ''}}</span>\r\n </label>\r\n </div>\r\n }\r\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <input\r\n class=\"date-input\"\r\n [matDatepicker]=\"picker\"\r\n [ngModel]=\"model\"\r\n \r\n (dateChange)=\"onDateChange($event.value)\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [min]=\"minDateObj\"\r\n [max]=\"maxDateObj\"\r\n [placeholder]=\"placeholder || (dateType === 'year' ? 'YYYY' : 'DD/MMM/YYYY')\"\r\n [class.error]=\"myField.touched && myField.invalid\"\r\n #myField=\"ngModel\"\r\n >\r\n <mat-datepicker-toggle class=\"picker-toggle\" [for]=\"picker\" [disabled]=\"disabled\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n [startView]=\"dateType === 'year' ? 'multi-year' : 'month'\"\r\n (yearSelected)=\"dateType === 'year' && onYearSelected($event, picker)\"\r\n ></mat-datepicker>\r\n </div>\r\n @if (myField.touched && myField.invalid && required) {\r\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.date-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 36px 0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.date-input::placeholder{color:#bbb}.date-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.date-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.date-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.date-input.error{border-color:var(--osl-error-color)}.date-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}.picker-toggle{position:absolute;right:4px;display:flex;align-items:center}.picker-toggle ::ng-deep .mat-mdc-icon-button{width:28px;height:28px;padding:4px;line-height:1;display:flex;align-items:center;justify-content:center}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple:before{opacity:0}.picker-toggle ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:16px;width:16px;height:16px;color:#333;opacity:.45;transition:opacity .15s,background-color .15s;border-radius:4px;padding:3px;box-sizing:content-box}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover:not([disabled]) .mat-icon{opacity:.9;background-color:#00000012}.picker-toggle ::ng-deep .mat-mdc-icon-button[disabled]{pointer-events:none;opacity:.4}\n"], dependencies: [{ kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: OslSkeletonDirective, selector: "[oslSkeleton]", inputs: ["oslSkeleton", "oslSkeletonType", "oslSkeletonAnimation", "oslSkeletonTheme", "oslSkeletonColor", "oslSkeletonHighlight", "oslSkeletonRadius", "oslSkeletonRows", "oslSkeletonRowGap", "oslSkeletonZIndex", "oslSkeletonDelay", "oslSkeletonDuration", "oslSkeletonMinHeight", "oslSkeletonForceReread", "oslSkeletonCircleSize", "oslSkeletonListItems", "oslSkeletonTableRows", "oslSkeletonTableCols", "oslSkeletonCardLines", "oslSkeletonBgColor"] }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }] });
|
|
2363
2366
|
}
|
|
2364
2367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, decorators: [{
|
|
2365
2368
|
type: Component,
|
|
2366
|
-
args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n @if (label) {\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required ? '*' : ''}}</span>\r\n </label>\r\n </div>\r\n }\r\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <input\r\n class=\"date-input\"\r\n [matDatepicker]=\"picker\"\r\n [ngModel]=\"model\"\r\n \r\n (dateChange)=\"onDateChange($event.value)\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [min]=\"minDateObj\"\r\n [max]=\"maxDateObj\"\r\n [placeholder]=\"placeholder || 'DD/MMM/YYYY'\"\r\n [class.error]=\"myField.touched && myField.invalid\"\r\n #myField=\"ngModel\"\r\n >\r\n <mat-datepicker-toggle class=\"picker-toggle\" [for]=\"picker\" [disabled]=\"disabled\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker
|
|
2369
|
+
args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\r\n @if (label) {\r\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\r\n <span class=\"label-text\" [title]=\"label\">{{label}}</span><span class=\"txt-clr-red label-required\">{{required ? '*' : ''}}</span>\r\n </label>\r\n </div>\r\n }\r\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\r\n <input\r\n class=\"date-input\"\r\n [matDatepicker]=\"picker\"\r\n [ngModel]=\"model\"\r\n \r\n (dateChange)=\"onDateChange($event.value)\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [min]=\"minDateObj\"\r\n [max]=\"maxDateObj\"\r\n [placeholder]=\"placeholder || (dateType === 'year' ? 'YYYY' : 'DD/MMM/YYYY')\"\r\n [class.error]=\"myField.touched && myField.invalid\"\r\n #myField=\"ngModel\"\r\n >\r\n <mat-datepicker-toggle class=\"picker-toggle\" [for]=\"picker\" [disabled]=\"disabled\">\r\n <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>\r\n </mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n [startView]=\"dateType === 'year' ? 'multi-year' : 'month'\"\r\n (yearSelected)=\"dateType === 'year' && onYearSelected($event, picker)\"\r\n ></mat-datepicker>\r\n </div>\r\n @if (myField.touched && myField.invalid && required) {\r\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\r\n }\r\n</div>\r\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px;display:flex;align-items:center;overflow:hidden}.label-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.label-required{flex-shrink:0}.txt-clr-red{color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.input-wrapper{position:relative;display:flex;align-items:center}.date-input{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 36px 0 10px;font-size:var(--osl-text-font-size);font-family:inherit;color:#333;background-color:#fff;transition:border-color .2s,box-shadow .2s;letter-spacing:.01em;box-sizing:border-box}.date-input::placeholder{color:#bbb}.date-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.date-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.date-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.date-input.error{border-color:var(--osl-error-color)}.date-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}.picker-toggle{position:absolute;right:4px;display:flex;align-items:center}.picker-toggle ::ng-deep .mat-mdc-icon-button{width:28px;height:28px;padding:4px;line-height:1;display:flex;align-items:center;justify-content:center}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple:before{opacity:0}.picker-toggle ::ng-deep .mat-mdc-icon-button .mat-icon{font-size:16px;width:16px;height:16px;color:#333;opacity:.45;transition:opacity .15s,background-color .15s;border-radius:4px;padding:3px;box-sizing:content-box}.picker-toggle ::ng-deep .mat-mdc-icon-button:hover:not([disabled]) .mat-icon{opacity:.9;background-color:#00000012}.picker-toggle ::ng-deep .mat-mdc-icon-button[disabled]{pointer-events:none;opacity:.4}\n"] }]
|
|
2367
2370
|
}], propDecorators: { label: [{
|
|
2368
2371
|
type: Input,
|
|
2369
2372
|
args: ['label']
|