osl-base-extended 2.0.26 → 2.0.27
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.
|
@@ -20,6 +20,7 @@ import * as i6 from '@angular/material/tooltip';
|
|
|
20
20
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
21
21
|
import * as i5 from '@angular/material/datepicker';
|
|
22
22
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
23
|
+
import { MAT_DATE_FORMATS } from '@angular/material/core';
|
|
23
24
|
import * as i4 from '@ngxmc/datetime-picker';
|
|
24
25
|
import { NgxMatDatetimepicker, NgxMatDatepickerInput } from '@ngxmc/datetime-picker';
|
|
25
26
|
import { MatInputModule } from '@angular/material/input';
|
|
@@ -2469,11 +2470,35 @@ class OslDatetimepicker {
|
|
|
2469
2470
|
return isNaN(d.getTime()) ? null : d;
|
|
2470
2471
|
}
|
|
2471
2472
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2472
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatetimepicker, isStandalone: false, selector: "osl-datetimepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", minDatetime: "minDatetime", maxDatetime: "maxDatetime", format: "format", displayFormatInput: ["displayFormat", "displayFormatInput"], showSeconds: "showSeconds", enableMeridian: "enableMeridian", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" },
|
|
2473
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslDatetimepicker, isStandalone: false, selector: "osl-datetimepicker", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", minDatetime: "minDatetime", maxDatetime: "maxDatetime", format: "format", displayFormatInput: ["displayFormat", "displayFormatInput"], showSeconds: "showSeconds", enableMeridian: "enableMeridian", skeletonLoading: "skeletonLoading", skeletonTheme: "skeletonTheme" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, providers: [
|
|
2474
|
+
{
|
|
2475
|
+
provide: MAT_DATE_FORMATS,
|
|
2476
|
+
useValue: {
|
|
2477
|
+
parse: {
|
|
2478
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2479
|
+
},
|
|
2480
|
+
display: {
|
|
2481
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2482
|
+
}
|
|
2483
|
+
}
|
|
2484
|
+
}
|
|
2485
|
+
], viewQueries: [{ propertyName: "dtNativeInput", first: true, predicate: ["dtNativeInput"], descendants: true }], ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n </label>\n </div>\n }\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <input\n class=\"dt-input\"\n [ngxMatDatetimePicker]=\"picker\"\n [ngModel]=\"dateModel\"\n (ngModelChange)=\"onDateChange($event)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [placeholder]=\"placeholder\"\n [class.error]=\"dtField.touched && dtField.invalid\"\n #dtField=\"ngModel\"\n readonly\n />\n <button\n type=\"button\"\n class=\"dt-icon-btn\"\n (click)=\"picker.open()\"\n [disabled]=\"disabled\"\n tabindex=\"-1\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"14\" height=\"14\" rx=\"2\"/>\n <line x1=\"3\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"6\"/>\n <line x1=\"13\" y1=\"2\" x2=\"13\" y2=\"6\"/>\n </svg>\n </button>\n <ngx-mat-datetime-picker\n #picker\n [showSpinners]=\"true\"\n [showSeconds]=\"showSeconds\"\n [enableMeridian]=\"enableMeridian\">\n </ngx-mat-datetime-picker>\n </div>\n @if (dtField.touched && dtField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\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}.dt-icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;background:transparent;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center;transition:color .15s;border-radius:4px}.dt-icon-btn svg{width:16px;height:16px;display:block}.dt-icon-btn:hover:not(:disabled){color:var(--osl-focus-border-color)}.dt-icon-btn:disabled{opacity:.35;cursor:not-allowed}.dt-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 38px 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}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}\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: "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: i4.NgxMatDatetimepicker, selector: "ngx-mat-datetime-picker", exportAs: ["ngxMatDatetimePicker"] }, { kind: "directive", type: i4.NgxMatDatepickerInput, selector: "input[ngxMatDatetimePicker]", inputs: ["ngxMatDatetimePicker", "min", "max", "matDatepickerFilter"], exportAs: ["ngxMatDatepickerInput"] }] });
|
|
2473
2486
|
}
|
|
2474
2487
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatetimepicker, decorators: [{
|
|
2475
2488
|
type: Component,
|
|
2476
|
-
args: [{ selector: 'osl-datetimepicker', standalone: false,
|
|
2489
|
+
args: [{ selector: 'osl-datetimepicker', standalone: false, providers: [
|
|
2490
|
+
{
|
|
2491
|
+
provide: MAT_DATE_FORMATS,
|
|
2492
|
+
useValue: {
|
|
2493
|
+
parse: {
|
|
2494
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2495
|
+
},
|
|
2496
|
+
display: {
|
|
2497
|
+
dateInput: 'DD-MMM-YYYY hh:mm a',
|
|
2498
|
+
}
|
|
2499
|
+
}
|
|
2500
|
+
}
|
|
2501
|
+
], template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <label class=\"label\" [class.txt-clr-red]=\"dtField.touched && dtField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required ? '*' : ''}}</span>\n </label>\n </div>\n }\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [oslSkeletonTheme]=\"skeletonTheme\">\n <input\n class=\"dt-input\"\n [ngxMatDatetimePicker]=\"picker\"\n [ngModel]=\"dateModel\"\n (ngModelChange)=\"onDateChange($event)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [min]=\"minDate\"\n [max]=\"maxDate\"\n [placeholder]=\"placeholder\"\n [class.error]=\"dtField.touched && dtField.invalid\"\n #dtField=\"ngModel\"\n readonly\n />\n <button\n type=\"button\"\n class=\"dt-icon-btn\"\n (click)=\"picker.open()\"\n [disabled]=\"disabled\"\n tabindex=\"-1\">\n <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <rect x=\"3\" y=\"4\" width=\"14\" height=\"14\" rx=\"2\"/>\n <line x1=\"3\" y1=\"8\" x2=\"17\" y2=\"8\"/>\n <line x1=\"7\" y1=\"2\" x2=\"7\" y2=\"6\"/>\n <line x1=\"13\" y1=\"2\" x2=\"13\" y2=\"6\"/>\n </svg>\n </button>\n <ngx-mat-datetime-picker\n #picker\n [showSpinners]=\"true\"\n [showSeconds]=\"showSeconds\"\n [enableMeridian]=\"enableMeridian\">\n </ngx-mat-datetime-picker>\n </div>\n @if (dtField.touched && dtField.invalid && required) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n }\n</div>\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}.dt-icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:22px;height:22px;padding:0;border:none;background:transparent;cursor:pointer;color:#9ca3af;display:flex;align-items:center;justify-content:center;transition:color .15s;border-radius:4px}.dt-icon-btn svg{width:16px;height:16px;display:block}.dt-icon-btn:hover:not(:disabled){color:var(--osl-focus-border-color)}.dt-icon-btn:disabled{opacity:.35;cursor:not-allowed}.dt-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 38px 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}.dt-input::placeholder{color:#bbb}.dt-input:hover:not(:disabled){border-color:var(--osl-focus-border-color)}.dt-input:focus{border-color:var(--osl-focus-border-color);box-shadow:0 0 0 3px var(--osl-focus-shadow, rgba(99, 102, 241, .14))}.dt-input:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.7}.dt-input.error{border-color:var(--osl-error-color)}.dt-input.error:focus{box-shadow:0 0 0 3px var(--osl-error-shadow, rgba(220, 38, 38, .14))}\n"] }]
|
|
2477
2502
|
}], propDecorators: { dtNativeInput: [{
|
|
2478
2503
|
type: ViewChild,
|
|
2479
2504
|
args: ['dtNativeInput']
|