osl-base-extended 0.1.17 → 0.1.18
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.
|
@@ -880,11 +880,11 @@ class Oslinput {
|
|
|
880
880
|
return result;
|
|
881
881
|
}
|
|
882
882
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
883
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", type: "type", placeholder: "placeholder", mask: "mask", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n <span [oslSkeleton]=\"skeletonLoading\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\n </label>\n </div>\n\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n @if(prefixIcon) {\n <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n }\n <input\n \n [type]=\"inputType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"min || null\"\n [attr.max]=\"max || null\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [email]=\"type === 'email'\"\n #myField=\"ngModel\"\n class=\"inner-input\"\n >\n @if(type === 'password') {\n <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n }\n @if(suffixIcon && type !== 'password') {\n <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n }\n </div>\n\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['email']) {\n <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n } @else if(myField.errors?.['min']) {\n <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n } @else if(myField.errors?.['max']) {\n <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n }\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\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.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { 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"] }] });
|
|
883
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Oslinput, isStandalone: false, selector: "osl-input", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", type: "type", placeholder: "placeholder", mask: "mask", min: "min", max: "max", minLength: "minLength", maxLength: "maxLength", prefixIcon: "prefixIcon", suffixIcon: "suffixIcon", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n <span [oslSkeleton]=\"skeletonLoading\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\n </label>\n </div>\n}\n\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n @if(prefixIcon) {\n <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n }\n <input\n \n [type]=\"inputType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"min || null\"\n [attr.max]=\"max || null\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [email]=\"type === 'email'\"\n #myField=\"ngModel\"\n class=\"inner-input\"\n >\n @if(type === 'password') {\n <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n }\n @if(suffixIcon && type !== 'password') {\n <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n }\n </div>\n\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['email']) {\n <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n } @else if(myField.errors?.['min']) {\n <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n } @else if(myField.errors?.['max']) {\n <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n }\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\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.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { 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"] }] });
|
|
884
884
|
}
|
|
885
885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, decorators: [{
|
|
886
886
|
type: Component,
|
|
887
|
-
args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n <span [oslSkeleton]=\"skeletonLoading\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\n </label>\n </div>\n\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n @if(prefixIcon) {\n <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n }\n <input\n \n [type]=\"inputType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"min || null\"\n [attr.max]=\"max || null\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [email]=\"type === 'email'\"\n #myField=\"ngModel\"\n class=\"inner-input\"\n >\n @if(type === 'password') {\n <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n }\n @if(suffixIcon && type !== 'password') {\n <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n }\n </div>\n\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['email']) {\n <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n } @else if(myField.errors?.['min']) {\n <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n } @else if(myField.errors?.['max']) {\n <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n }\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
887
|
+
args: [{ selector: 'osl-input', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n <span [oslSkeleton]=\"skeletonLoading\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></span>\n </label>\n </div>\n}\n\n <div class=\"input-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.plain]=\"!hasWrapper\" [class.error]=\"myField.touched && myField.invalid\" [class.input-disabled]=\"disabled\">\n @if(prefixIcon) {\n <mat-icon class=\"input-icon prefix-icon\">{{prefixIcon}}</mat-icon>\n }\n <input\n \n [type]=\"inputType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"min || null\"\n [attr.max]=\"max || null\"\n [attr.minlength]=\"minLength\"\n [attr.maxlength]=\"maxLength\"\n [email]=\"type === 'email'\"\n #myField=\"ngModel\"\n class=\"inner-input\"\n >\n @if(type === 'password') {\n <button type=\"button\" class=\"password-toggle\" (click)=\"togglePassword()\" tabindex=\"-1\">\n <mat-icon>{{showPassword ? 'visibility_off' : 'visibility'}}</mat-icon>\n </button>\n }\n @if(suffixIcon && type !== 'password') {\n <mat-icon class=\"input-icon suffix-icon\">{{suffixIcon}}</mat-icon>\n }\n </div>\n\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['email']) {\n <mat-hint class=\"hint\">Please enter a valid email address.</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n } @else if(myField.errors?.['min']) {\n <mat-hint class=\"hint\">Value must be at least {{min}}.</mat-hint>\n } @else if(myField.errors?.['max']) {\n <mat-hint class=\"hint\">Value must be at most {{max}}.</mat-hint>\n }\n }\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.input-wrapper{display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);padding:0 8px;gap:6px;transition:border-color .5s}.input-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.input-wrapper.error{border-color:var(--osl-error-color)}.input-wrapper.input-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.input-wrapper.plain{padding:0;border:none;height:auto;gap:0}.input-wrapper.plain .inner-input{border:1px solid var(--osl-border-color);border-radius:var(--osl-border-radius);padding:5px;height:var(--osl-control-height)}.input-wrapper.plain .inner-input:focus{border-color:var(--osl-focus-border-color)}.input-wrapper.plain .inner-input.error{border-color:var(--osl-error-color)}.inner-input{flex:1;min-width:0;height:100%;border:none;outline:none;font-size:var(--osl-text-font-size);background:transparent;width:100%}.inner-input:disabled{cursor:not-allowed;background:transparent}.inner-input::placeholder{font-size:var(--osl-label-font-size);color:#aaa}.input-icon{font-size:18px;width:18px;height:18px;color:#888;flex-shrink:0;-webkit-user-select:none;user-select:none}.password-toggle{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;cursor:pointer;color:#888;flex-shrink:0}.password-toggle mat-icon{font-size:18px;width:18px;height:18px}.password-toggle:hover{color:#333}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
888
888
|
}], propDecorators: { label: [{
|
|
889
889
|
type: Input,
|
|
890
890
|
args: ['label']
|
|
@@ -963,11 +963,11 @@ class Osltextarea {
|
|
|
963
963
|
this.modelChange.emit(this.model);
|
|
964
964
|
}
|
|
965
965
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
966
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Osltextarea, isStandalone: false, selector: "osl-textarea", inputs: { label: "label", rows: "rows", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", characterCounter: "characterCounter", resize: "resize", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
966
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: Osltextarea, isStandalone: false, selector: "osl-textarea", inputs: { label: "label", rows: "rows", required: "required", disabled: "disabled", model: "model", placeholder: "placeholder", maxLength: "maxLength", minLength: "minLength", characterCounter: "characterCounter", resize: "resize", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n }\n \n <div [oslSkeleton]=\"skeletonLoading\">\n <textarea\n [rows]=\"rows\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [style.resize]=\"resize\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n ></textarea>\n </div>\n <div class=\"textarea-footer\">\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n }\n } @else {\n <span></span>\n }\n @if(showCounter) {\n <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n {{currentLength}}/{{maxLength}}\n </span>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}textarea{width:100%;border-radius:var(--osl-border-radius);outline:none;padding:6px 8px;font-size:var(--osl-text-font-size);border:1px solid var(--osl-border-color);resize:none;font-family:inherit;transition:border-color .5s}textarea:focus{border-color:var(--osl-focus-border-color)}textarea:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}textarea::placeholder{font-size:var(--osl-label-font-size);color:#aaa}textarea.error{border-color:var(--osl-error-color)}.textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.hint{color:var(--osl-error-color);font-size:var(--osl-hint-font-size)}.char-counter{font-size:var(--osl-hint-font-size);color:#888;margin-left:auto}.char-counter.counter-limit{color:var(--osl-error-color);font-weight:500}.txt-clr-red{color:var(--osl-error-color)}\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"] }] });
|
|
967
967
|
}
|
|
968
968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, decorators: [{
|
|
969
969
|
type: Component,
|
|
970
|
-
args: [{ selector: 'osl-textarea', standalone: false, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
970
|
+
args: [{ selector: 'osl-textarea', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n }\n \n <div [oslSkeleton]=\"skeletonLoading\">\n <textarea\n [rows]=\"rows\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [style.resize]=\"resize\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n ></textarea>\n </div>\n <div class=\"textarea-footer\">\n @if(myField.touched && myField.invalid) {\n @if(myField.errors?.['required']) {\n <mat-hint class=\"hint\">{{label}} is Required!</mat-hint>\n } @else if(myField.errors?.['minlength']) {\n <mat-hint class=\"hint\">Minimum {{minLength}} characters required.</mat-hint>\n } @else if(myField.errors?.['maxlength']) {\n <mat-hint class=\"hint\">Maximum {{maxLength}} characters allowed.</mat-hint>\n }\n } @else {\n <span></span>\n }\n @if(showCounter) {\n <span class=\"char-counter\" [class.counter-limit]=\"currentLength >= maxLength!\">\n {{currentLength}}/{{maxLength}}\n </span>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}textarea{width:100%;border-radius:var(--osl-border-radius);outline:none;padding:6px 8px;font-size:var(--osl-text-font-size);border:1px solid var(--osl-border-color);resize:none;font-family:inherit;transition:border-color .5s}textarea:focus{border-color:var(--osl-focus-border-color)}textarea:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}textarea::placeholder{font-size:var(--osl-label-font-size);color:#aaa}textarea.error{border-color:var(--osl-error-color)}.textarea-footer{display:flex;justify-content:space-between;align-items:center;margin-top:2px}.hint{color:var(--osl-error-color);font-size:var(--osl-hint-font-size)}.char-counter{font-size:var(--osl-hint-font-size);color:#888;margin-left:auto}.char-counter.counter-limit{color:var(--osl-error-color);font-weight:500}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
971
971
|
}], propDecorators: { label: [{
|
|
972
972
|
type: Input,
|
|
973
973
|
args: ['label']
|
|
@@ -1044,11 +1044,11 @@ class OslSelect {
|
|
|
1044
1044
|
return this.model !== null && this.model !== undefined && this.model !== '';
|
|
1045
1045
|
}
|
|
1046
1046
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1047
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSelect, isStandalone: false, selector: "osl-select", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", clearable: "clearable", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1047
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslSelect, isStandalone: false, selector: "osl-select", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", clearable: "clearable", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n\n }\n\n <div class=\"select-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n @if(loading) {\n <span class=\"select-spinner\"></span>\n }\n <select\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled || loading\"\n #myField=\"ngModel\"\n >\n <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n @for(item of datasource; track item) {\n <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n }\n </select>\n @if(clearable && hasValue && !disabled && !loading) {\n <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n </div>\n\n @if(myField.touched && myField.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}.select-wrapper{position:relative;display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);transition:border-color .5s}.select-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.select-wrapper.error{border-color:var(--osl-error-color)}.select-wrapper.select-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.select-wrapper select{flex:1;height:100%;width:100%;font-size:var(--osl-text-font-size);border:none;outline:none;background:transparent;padding:0 32px 0 8px;cursor:pointer;appearance:none;-webkit-appearance:none}.select-wrapper select:disabled{cursor:not-allowed}.select-arrow{position:absolute;right:6px;font-size:18px;width:18px;height:18px;color:#888;pointer-events:none;-webkit-user-select:none;user-select:none}.select-clear{display:flex;align-items:center;justify-content:center;position:absolute;right:28px;background:none;border:none;padding:0;cursor:pointer;color:#aaa;z-index:1}.select-clear mat-icon{font-size:16px;width:16px;height:16px}.select-clear:hover{color:#333}.select-spinner{position:absolute;left:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:select-spin .7s linear infinite;pointer-events:none}@keyframes select-spin{to{transform:rotate(360deg)}}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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"] }] });
|
|
1048
1048
|
}
|
|
1049
1049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, decorators: [{
|
|
1050
1050
|
type: Component,
|
|
1051
|
-
args: [{ selector: 'osl-select', standalone: false, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1051
|
+
args: [{ selector: 'osl-select', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n\n }\n\n <div class=\"select-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"myField.touched && myField.invalid\" [class.select-disabled]=\"disabled || loading\">\n @if(loading) {\n <span class=\"select-spinner\"></span>\n }\n <select\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"onChange()\"\n [required]=\"required\"\n [disabled]=\"disabled || loading\"\n #myField=\"ngModel\"\n >\n <option value=\"\" [disabled]=\"required\" [hidden]=\"required\" selected>{{placeholder}}</option>\n @for(item of datasource; track item) {\n <option [value]=\"getValue(item)\">{{getDisplay(item)}}</option>\n }\n </select>\n @if(clearable && hasValue && !disabled && !loading) {\n <button type=\"button\" class=\"select-clear\" (click)=\"onClear($event)\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n <mat-icon class=\"select-arrow\">expand_more</mat-icon>\n </div>\n\n @if(myField.touched && myField.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}.select-wrapper{position:relative;display:flex;align-items:center;height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);border:1px solid var(--osl-border-color);transition:border-color .5s}.select-wrapper:focus-within{border-color:var(--osl-focus-border-color)}.select-wrapper.error{border-color:var(--osl-error-color)}.select-wrapper.select-disabled{background:#f5f5f5;opacity:.7;cursor:not-allowed}.select-wrapper select{flex:1;height:100%;width:100%;font-size:var(--osl-text-font-size);border:none;outline:none;background:transparent;padding:0 32px 0 8px;cursor:pointer;appearance:none;-webkit-appearance:none}.select-wrapper select:disabled{cursor:not-allowed}.select-arrow{position:absolute;right:6px;font-size:18px;width:18px;height:18px;color:#888;pointer-events:none;-webkit-user-select:none;user-select:none}.select-clear{display:flex;align-items:center;justify-content:center;position:absolute;right:28px;background:none;border:none;padding:0;cursor:pointer;color:#aaa;z-index:1}.select-clear mat-icon{font-size:16px;width:16px;height:16px}.select-clear:hover{color:#333}.select-spinner{position:absolute;left:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:select-spin .7s linear infinite;pointer-events:none}@keyframes select-spin{to{transform:rotate(360deg)}}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
1052
1052
|
}], propDecorators: { label: [{
|
|
1053
1053
|
type: Input,
|
|
1054
1054
|
args: ['label']
|
|
@@ -1117,11 +1117,11 @@ class OslRadio {
|
|
|
1117
1117
|
this.changeEv.emit(this.model);
|
|
1118
1118
|
}
|
|
1119
1119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1120
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslRadio, isStandalone: false, selector: "osl-radio", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", inline: "inline", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1120
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslRadio, isStandalone: false, selector: "osl-radio", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", inline: "inline", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n \n </div>\n\n }\n <div class=\"radio-group\" [oslSkeleton]=\"skeletonLoading\" [class.radio-inline]=\"inline\">\n @for(item of datasource; track item) {\n <label class=\"radio-item\" [class.disabled]=\"disabled\">\n <input\n type=\"radio\"\n [name]=\"groupName\"\n [checked]=\"isChecked(item)\"\n [disabled]=\"disabled\"\n (change)=\"onSelect(item)\"\n >\n <span>{{getDisplay(item)}}</span>\n </label>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"], dependencies: [{ 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"] }] });
|
|
1121
1121
|
}
|
|
1122
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslRadio, decorators: [{
|
|
1123
1123
|
type: Component,
|
|
1124
|
-
args: [{ selector: 'osl-radio', standalone: false, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1124
|
+
args: [{ selector: 'osl-radio', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\">{{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span></label>\n \n </div>\n\n }\n <div class=\"radio-group\" [oslSkeleton]=\"skeletonLoading\" [class.radio-inline]=\"inline\">\n @for(item of datasource; track item) {\n <label class=\"radio-item\" [class.disabled]=\"disabled\">\n <input\n type=\"radio\"\n [name]=\"groupName\"\n [checked]=\"isChecked(item)\"\n [disabled]=\"disabled\"\n (change)=\"onSelect(item)\"\n >\n <span>{{getDisplay(item)}}</span>\n </label>\n }\n </div>\n</div>\n", styles: [".label{font-size:var(--osl-label-font-size);margin-bottom:5px}.radio-group{display:flex;gap:10px;padding:4px 0}.radio-group.radio-inline{flex-direction:row;flex-wrap:wrap;gap:16px}.radio-item{display:flex;align-items:center;gap:6px;font-size:var(--osl-label-font-size);cursor:pointer}.radio-item input[type=radio]{width:15px;height:15px;cursor:pointer;accent-color:#333;flex-shrink:0}.radio-item.disabled{opacity:.6;cursor:not-allowed}.radio-item.disabled input[type=radio]{cursor:not-allowed}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
1125
1125
|
}], propDecorators: { label: [{
|
|
1126
1126
|
type: Input,
|
|
1127
1127
|
args: ['label']
|
|
@@ -1356,11 +1356,11 @@ class OslAutocomplete extends baseComponent {
|
|
|
1356
1356
|
}
|
|
1357
1357
|
}
|
|
1358
1358
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", searchType: "searchType", methodName: "methodName", configMethodName: "configMethodName", service: "service", object: "object", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1359
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: OslAutocomplete, isStandalone: false, selector: "osl-autocomplete", inputs: { label: "label", required: "required", disabled: "disabled", model: "model", datasource: "datasource", displayField: "displayField", valueField: "valueField", placeholder: "placeholder", loading: "loading", searchType: "searchType", methodName: "methodName", configMethodName: "configMethodName", service: "service", object: "object", skeletonLoading: "skeletonLoading" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n\n }\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusout)=\"onFocusOut()\"\n [disabled]=\"disabled || loading\"\n [formControl]=\"inputControl\"\n [class.error]=\"isInvalid\"\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\n autocomplete=\"off\"\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\n >\n @if(loading) {\n <span class=\"ac-spinner\"></span>\n } @else {\n @if(inputValue && !disabled) {\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if(searchType == 'Api' && !disabled) {\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\n @if(filteredItems.length > 0) {\n @for(item of filteredItems; track item) {\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n }\n } @else {\n @if(searchType == 'Local'){\n <div class=\"no-results\">No results found</div>\n }\n }\n </div>\n }\n </div>\n @if(isInvalid) {\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}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper 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 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa;font-size:12px}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.ac-clear--shifted{right:40px}.ac-lister-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;cursor:pointer;border-radius:4px;color:#aaa;opacity:.75;transition:opacity .15s,transform .1s}.ac-lister-btn:hover{opacity:1}.ac-lister-btn:active{transform:translateY(calc(-50% + 1px))}.ac-lister-img{width:24px;height:24px;display:block;pointer-events:none}.autocomplete-wrapper--api input{padding-right:64px}.dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] });
|
|
1360
1360
|
}
|
|
1361
1361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
|
|
1362
1362
|
type: Component,
|
|
1363
|
-
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1363
|
+
args: [{ selector: 'osl-autocomplete', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if(label){\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"isInvalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n\n }\n <div class=\"autocomplete-wrapper\" [oslSkeleton]=\"skeletonLoading\" [class.error]=\"isInvalid\" [class.autocomplete-wrapper--api]=\"searchType == 'Api'\">\n <input\n [value]=\"inputValue\"\n (input)=\"onInput($any($event.target).value)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n (focusout)=\"onFocusOut()\"\n [disabled]=\"disabled || loading\"\n [formControl]=\"inputControl\"\n [class.error]=\"isInvalid\"\n [placeholder]=\"loading ? 'Loading...' : placeholder\"\n autocomplete=\"off\"\n (keyup.enter)=\"searchType == 'Api' ? openLister() : null\"\n >\n @if(loading) {\n <span class=\"ac-spinner\"></span>\n } @else {\n @if(inputValue && !disabled) {\n <button type=\"button\" class=\"ac-clear\" [class.ac-clear--shifted]=\"searchType == 'Api'\" (mousedown)=\"clearValue($event)\" tabindex=\"-1\" title=\"Clear\">\n <mat-icon>close</mat-icon>\n </button>\n }\n @if(searchType == 'Api' && !disabled) {\n <button type=\"button\" class=\"ac-lister-btn\" (mousedown)=\"$event.preventDefault(); openLister()\" tabindex=\"-1\" title=\"Browse list or press Enter\">\n <!-- <img src=\"assets/enter (2).png\" alt=\"Enter\" class=\"ac-lister-img\"> -->\n <mat-icon>manage_search</mat-icon>\n </button>\n }\n }\n @if(showDropdown && !loading) {\n <div class=\"dropdown\">\n @if(filteredItems.length > 0) {\n @for(item of filteredItems; track item) {\n <div class=\"dropdown-item\" (mousedown)=\"selectItem(item)\">{{getDisplay(item)}}</div>\n }\n } @else {\n @if(searchType == 'Local'){\n <div class=\"no-results\">No results found</div>\n }\n }\n </div>\n }\n </div>\n @if(isInvalid) {\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}.autocomplete-wrapper{position:relative;display:flex;align-items:center}.autocomplete-wrapper 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 30px 0 8px;font-size:var(--osl-text-font-size);transition:border-color .5s}.autocomplete-wrapper input:focus{border-color:var(--osl-focus-border-color)}.autocomplete-wrapper input:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}.autocomplete-wrapper input::placeholder{font-size:var(--osl-label-font-size);color:#aaa;font-size:12px}.autocomplete-wrapper input.error{border-color:var(--osl-error-color)}.ac-spinner{position:absolute;right:8px;width:14px;height:14px;border:2px solid var(--osl-border-color);border-top-color:var(--osl-focus-border-color);border-radius:50%;animation:ac-spin .7s linear infinite;pointer-events:none}@keyframes ac-spin{to{transform:rotate(360deg)}}.ac-clear{position:absolute;right:6px;display:flex;align-items:center;background:none;border:none;padding:0;cursor:pointer;color:#aaa}.ac-clear mat-icon{font-size:16px;width:16px;height:16px}.ac-clear:hover{color:#333}.ac-clear--shifted{right:40px}.ac-lister-btn{position:absolute;right:5px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;background:none;border:none;padding:2px;cursor:pointer;border-radius:4px;color:#aaa;opacity:.75;transition:opacity .15s,transform .1s}.ac-lister-btn:hover{opacity:1}.ac-lister-btn:active{transform:translateY(calc(-50% + 1px))}.ac-lister-img{width:24px;height:24px;display:block;pointer-events:none}.autocomplete-wrapper--api input{padding-right:64px}.dropdown{position:absolute;top:100%;left:0;right:0;z-index:1000;background:#fff;border:1px solid var(--osl-border-color);border-top:none;border-radius:0 0 var(--osl-border-radius) var(--osl-border-radius);max-height:200px;overflow-y:auto;box-shadow:0 4px 8px #00000014}.dropdown-item{padding:8px 10px;font-size:var(--osl-label-font-size);cursor:pointer}.dropdown-item:hover{background:#f5f5f5}.no-results{padding:8px 10px;font-size:var(--osl-label-font-size);color:#aaa;font-style:italic}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
1364
1364
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
1365
1365
|
type: Input,
|
|
1366
1366
|
args: ['label']
|
|
@@ -1558,11 +1558,11 @@ class OslDatepicker {
|
|
|
1558
1558
|
this.modelChange.emit(this.model);
|
|
1559
1559
|
}
|
|
1560
1560
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1561
|
-
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", skeletonLoading: "skeletonLoading", maxDate: "maxDate" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1561
|
+
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", skeletonLoading: "skeletonLoading", maxDate: "maxDate" }, outputs: { modelChange: "modelChange", changeEv: "changeEv" }, ngImport: i0, template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n\n }\n <div [oslSkeleton]=\"skeletonLoading\">\n <input\n [type]=\"dateType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"minDate || null\"\n [attr.max]=\"maxDate || null\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n >\n </div>\n @if(myField.touched && myField.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}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\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"] }] });
|
|
1562
1562
|
}
|
|
1563
1563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, decorators: [{
|
|
1564
1564
|
type: Component,
|
|
1565
|
-
args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n <div [oslSkeleton]=\"skeletonLoading\">\n
|
|
1565
|
+
args: [{ selector: 'osl-datepicker', standalone: false, template: "<div class=\"d-flex flex-column\">\n @if (label) {\n <div [oslSkeleton]=\"skeletonLoading\">\n <label class=\"label\" [class.txt-clr-red]=\"myField.touched && myField.invalid\">\n {{label}} <span class=\"txt-clr-red\">{{required?'*':''}}</span>\n </label>\n \n </div>\n\n }\n <div [oslSkeleton]=\"skeletonLoading\">\n <input\n [type]=\"dateType\"\n [ngModel]=\"model\"\n (ngModelChange)=\"onModelChange($event)\"\n (change)=\"changeEv.emit(model)\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [placeholder]=\"placeholder\"\n [attr.min]=\"minDate || null\"\n [attr.max]=\"maxDate || null\"\n #myField=\"ngModel\"\n [class.error]=\"myField.touched && myField.invalid\"\n >\n </div>\n @if(myField.touched && myField.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}input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[type=week]{height:var(--osl-control-height);width:100%;border-radius:var(--osl-border-radius);outline:none;border:1px solid var(--osl-border-color);padding:0 8px;font-size:var(--osl-text-font-size);font-family:inherit;transition:border-color .5s}input[type=date]:focus,input[type=datetime-local]:focus,input[type=time]:focus,input[type=month]:focus,input[type=week]:focus{border-color:var(--osl-focus-border-color)}input[type=date]:disabled,input[type=datetime-local]:disabled,input[type=time]:disabled,input[type=month]:disabled,input[type=week]:disabled{background:#f5f5f5;cursor:not-allowed;opacity:.7}input[type=date].error,input[type=datetime-local].error,input[type=time].error,input[type=month].error,input[type=week].error{border-color:var(--osl-error-color)}.hint{color:var(--osl-error-color);margin-top:2px;font-size:var(--osl-hint-font-size)}.txt-clr-red{color:var(--osl-error-color)}\n"] }]
|
|
1566
1566
|
}], propDecorators: { label: [{
|
|
1567
1567
|
type: Input,
|
|
1568
1568
|
args: ['label']
|