osl-base-extended 1.0.35 → 1.0.37
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.
|
@@ -1783,11 +1783,11 @@ class OslDatepicker {
|
|
|
1783
1783
|
return localISO;
|
|
1784
1784
|
}
|
|
1785
1785
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1786
|
-
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 {{label}} <span class=\"txt-clr-red\">{{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 || '
|
|
1786
|
+
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 {{label}} <span class=\"txt-clr-red\">{{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 #picker></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}.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$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.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: i2.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]" }] });
|
|
1787
1787
|
}
|
|
1788
1788
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, decorators: [{
|
|
1789
1789
|
type: Component,
|
|
1790
|
-
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 {{label}} <span class=\"txt-clr-red\">{{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 || '
|
|
1790
|
+
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 {{label}} <span class=\"txt-clr-red\">{{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 #picker></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}.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"] }]
|
|
1791
1791
|
}], propDecorators: { label: [{
|
|
1792
1792
|
type: Input,
|
|
1793
1793
|
args: ['label']
|