osl-base-extended 0.1.16 → 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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Inject, inject, Injector, Injectable, InjectionToken, PLATFORM_ID, Input, Directive, EventEmitter, Output, HostListener, ViewChild, NgModule } from '@angular/core';
|
|
2
|
+
import { Component, Inject, inject, Injector, Injectable, InjectionToken, PLATFORM_ID, Input, Optional, Directive, EventEmitter, Output, HostListener, ViewChild, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/dialog';
|
|
4
4
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
5
5
|
import { MatSnackBar } from '@angular/material/snack-bar';
|
|
@@ -11,7 +11,7 @@ import { MatIconButton, MatButtonModule } from '@angular/material/button';
|
|
|
11
11
|
import * as i2 from '@angular/material/icon';
|
|
12
12
|
import { MatIconModule } from '@angular/material/icon';
|
|
13
13
|
import { HttpHeaders, HttpParams, HttpClient } from '@angular/common/http';
|
|
14
|
-
import { firstValueFrom, timeout, debounceTime, distinctUntilChanged } from 'rxjs';
|
|
14
|
+
import { firstValueFrom, timeout, BehaviorSubject, debounceTime, distinctUntilChanged } from 'rxjs';
|
|
15
15
|
import * as i1$1 from '@angular/forms';
|
|
16
16
|
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
17
17
|
import * as i2$1 from '@angular/material/form-field';
|
|
@@ -297,6 +297,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
297
297
|
args: [{ providedIn: 'root' }]
|
|
298
298
|
}] });
|
|
299
299
|
|
|
300
|
+
class OslSkeletonThemeService {
|
|
301
|
+
_theme$ = new BehaviorSubject('light');
|
|
302
|
+
/** Subscribe to react to global theme changes */
|
|
303
|
+
theme$ = this._theme$.asObservable();
|
|
304
|
+
get current() {
|
|
305
|
+
return this._theme$.getValue();
|
|
306
|
+
}
|
|
307
|
+
setTheme(theme) {
|
|
308
|
+
this._theme$.next(theme);
|
|
309
|
+
}
|
|
310
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
311
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonThemeService, providedIn: 'root' });
|
|
312
|
+
}
|
|
313
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonThemeService, decorators: [{
|
|
314
|
+
type: Injectable,
|
|
315
|
+
args: [{ providedIn: 'root' }]
|
|
316
|
+
}] });
|
|
317
|
+
|
|
300
318
|
// Injected once per app lifetime — static flag avoids duplicate <style> tags.
|
|
301
319
|
let _osl_sk_injected = false;
|
|
302
320
|
// CSS is minified inline: zero runtime SCSS processing, one GPU-composited
|
|
@@ -332,6 +350,7 @@ class OslSkeletonDirective {
|
|
|
332
350
|
renderer;
|
|
333
351
|
zone;
|
|
334
352
|
platformId;
|
|
353
|
+
themeService;
|
|
335
354
|
// ── Inputs ────────────────────────────────────────────────────────────────
|
|
336
355
|
/** Primary toggle — set true while data is loading */
|
|
337
356
|
loading = false;
|
|
@@ -339,8 +358,10 @@ class OslSkeletonDirective {
|
|
|
339
358
|
type = 'auto';
|
|
340
359
|
/** Animation style (default: shimmer) */
|
|
341
360
|
animation = 'shimmer';
|
|
342
|
-
/** Colour preset — overridden by oslSkeletonColor & oslSkeletonHighlight
|
|
343
|
-
|
|
361
|
+
/** Colour preset — overridden by oslSkeletonColor & oslSkeletonHighlight.
|
|
362
|
+
* When omitted, the global OslSkeletonThemeService value is used. */
|
|
363
|
+
set theme(value) { this._themeOverride = value; }
|
|
364
|
+
get theme() { return this._themeOverride ?? this._serviceTheme; }
|
|
344
365
|
/** Override bone background colour (e.g. '#cbd5e1') */
|
|
345
366
|
color;
|
|
346
367
|
/** Override shimmer highlight colour (e.g. 'rgba(255,255,255,0.8)') */
|
|
@@ -378,16 +399,32 @@ class OslSkeletonDirective {
|
|
|
378
399
|
cachedBones = null;
|
|
379
400
|
delayTimer = null;
|
|
380
401
|
rafId = 0;
|
|
402
|
+
_themeOverride;
|
|
403
|
+
_serviceTheme = 'light';
|
|
404
|
+
_themeSub;
|
|
381
405
|
// ── Lifecycle ─────────────────────────────────────────────────────────────
|
|
382
|
-
constructor(el, renderer, zone, platformId) {
|
|
406
|
+
constructor(el, renderer, zone, platformId, themeService) {
|
|
383
407
|
this.el = el;
|
|
384
408
|
this.renderer = renderer;
|
|
385
409
|
this.zone = zone;
|
|
386
410
|
this.platformId = platformId;
|
|
411
|
+
this.themeService = themeService;
|
|
387
412
|
if (isPlatformBrowser(this.platformId)) {
|
|
388
413
|
OslSkeletonDirective.injectStyles();
|
|
389
414
|
}
|
|
390
415
|
}
|
|
416
|
+
ngOnInit() {
|
|
417
|
+
if (!isPlatformBrowser(this.platformId) || !this.themeService)
|
|
418
|
+
return;
|
|
419
|
+
this._themeSub = this.themeService.theme$.subscribe(theme => {
|
|
420
|
+
if (this._themeOverride !== undefined)
|
|
421
|
+
return;
|
|
422
|
+
this._serviceTheme = theme;
|
|
423
|
+
if (this.loading && this.overlay?.parentNode) {
|
|
424
|
+
this.zone.runOutsideAngular(() => this.applyConfig());
|
|
425
|
+
}
|
|
426
|
+
});
|
|
427
|
+
}
|
|
391
428
|
ngOnChanges(changes) {
|
|
392
429
|
if (!isPlatformBrowser(this.platformId))
|
|
393
430
|
return;
|
|
@@ -699,18 +736,20 @@ class OslSkeletonDirective {
|
|
|
699
736
|
style.textContent = SKELETON_CSS;
|
|
700
737
|
document.head.appendChild(style);
|
|
701
738
|
}
|
|
702
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Directive });
|
|
739
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: PLATFORM_ID }, { token: OslSkeletonThemeService, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
703
740
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.9", type: OslSkeletonDirective, isStandalone: false, selector: "[oslSkeleton]", inputs: { loading: ["oslSkeleton", "loading"], type: ["oslSkeletonType", "type"], animation: ["oslSkeletonAnimation", "animation"], theme: ["oslSkeletonTheme", "theme"], color: ["oslSkeletonColor", "color"], highlight: ["oslSkeletonHighlight", "highlight"], radius: ["oslSkeletonRadius", "radius"], rows: ["oslSkeletonRows", "rows"], rowGap: ["oslSkeletonRowGap", "rowGap"], zIndex: ["oslSkeletonZIndex", "zIndex"], delay: ["oslSkeletonDelay", "delay"], duration: ["oslSkeletonDuration", "duration"], minHeight: ["oslSkeletonMinHeight", "minHeight"], forceReread: ["oslSkeletonForceReread", "forceReread"], circleSize: ["oslSkeletonCircleSize", "circleSize"], listItems: ["oslSkeletonListItems", "listItems"], tableRows: ["oslSkeletonTableRows", "tableRows"], tableCols: ["oslSkeletonTableCols", "tableCols"], cardLines: ["oslSkeletonCardLines", "cardLines"], bgColor: ["oslSkeletonBgColor", "bgColor"] }, usesOnChanges: true, ngImport: i0 });
|
|
704
741
|
}
|
|
705
742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSkeletonDirective, decorators: [{
|
|
706
743
|
type: Directive,
|
|
707
744
|
args: [{
|
|
708
745
|
selector: '[oslSkeleton]',
|
|
709
|
-
standalone: false
|
|
746
|
+
standalone: false
|
|
710
747
|
}]
|
|
711
748
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
|
712
749
|
type: Inject,
|
|
713
750
|
args: [PLATFORM_ID]
|
|
751
|
+
}] }, { type: OslSkeletonThemeService, decorators: [{
|
|
752
|
+
type: Optional
|
|
714
753
|
}] }], propDecorators: { loading: [{
|
|
715
754
|
type: Input,
|
|
716
755
|
args: ['oslSkeleton']
|
|
@@ -841,11 +880,11 @@ class Oslinput {
|
|
|
841
880
|
return result;
|
|
842
881
|
}
|
|
843
882
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
844
|
-
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"] }] });
|
|
845
884
|
}
|
|
846
885
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Oslinput, decorators: [{
|
|
847
886
|
type: Component,
|
|
848
|
-
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"] }]
|
|
849
888
|
}], propDecorators: { label: [{
|
|
850
889
|
type: Input,
|
|
851
890
|
args: ['label']
|
|
@@ -924,11 +963,11 @@ class Osltextarea {
|
|
|
924
963
|
this.modelChange.emit(this.model);
|
|
925
964
|
}
|
|
926
965
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
927
|
-
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"] }] });
|
|
928
967
|
}
|
|
929
968
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Osltextarea, decorators: [{
|
|
930
969
|
type: Component,
|
|
931
|
-
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"] }]
|
|
932
971
|
}], propDecorators: { label: [{
|
|
933
972
|
type: Input,
|
|
934
973
|
args: ['label']
|
|
@@ -1005,11 +1044,11 @@ class OslSelect {
|
|
|
1005
1044
|
return this.model !== null && this.model !== undefined && this.model !== '';
|
|
1006
1045
|
}
|
|
1007
1046
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1008
|
-
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"] }] });
|
|
1009
1048
|
}
|
|
1010
1049
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslSelect, decorators: [{
|
|
1011
1050
|
type: Component,
|
|
1012
|
-
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"] }]
|
|
1013
1052
|
}], propDecorators: { label: [{
|
|
1014
1053
|
type: Input,
|
|
1015
1054
|
args: ['label']
|
|
@@ -1078,11 +1117,11 @@ class OslRadio {
|
|
|
1078
1117
|
this.changeEv.emit(this.model);
|
|
1079
1118
|
}
|
|
1080
1119
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslRadio, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1081
|
-
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"] }] });
|
|
1082
1121
|
}
|
|
1083
1122
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslRadio, decorators: [{
|
|
1084
1123
|
type: Component,
|
|
1085
|
-
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"] }]
|
|
1086
1125
|
}], propDecorators: { label: [{
|
|
1087
1126
|
type: Input,
|
|
1088
1127
|
args: ['label']
|
|
@@ -1317,11 +1356,11 @@ class OslAutocomplete extends baseComponent {
|
|
|
1317
1356
|
}
|
|
1318
1357
|
}
|
|
1319
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 });
|
|
1320
|
-
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"] }] });
|
|
1321
1360
|
}
|
|
1322
1361
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslAutocomplete, decorators: [{
|
|
1323
1362
|
type: Component,
|
|
1324
|
-
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"] }]
|
|
1325
1364
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { label: [{
|
|
1326
1365
|
type: Input,
|
|
1327
1366
|
args: ['label']
|
|
@@ -1519,11 +1558,11 @@ class OslDatepicker {
|
|
|
1519
1558
|
this.modelChange.emit(this.model);
|
|
1520
1559
|
}
|
|
1521
1560
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1522
|
-
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"] }] });
|
|
1523
1562
|
}
|
|
1524
1563
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OslDatepicker, decorators: [{
|
|
1525
1564
|
type: Component,
|
|
1526
|
-
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"] }]
|
|
1527
1566
|
}], propDecorators: { label: [{
|
|
1528
1567
|
type: Input,
|
|
1529
1568
|
args: ['label']
|
|
@@ -2447,5 +2486,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
2447
2486
|
* Generated bundle index. Do not edit.
|
|
2448
2487
|
*/
|
|
2449
2488
|
|
|
2450
|
-
export { DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSlideToggle, Oslinput, Osltextarea, baseComponent };
|
|
2489
|
+
export { DeleteConfirmation, DeleteConfirmationData, Dialog, DialogWrapper, DynamicForm, FormStructureModule, Httpbase, OslAutocomplete, OslAutocompleteLister, OslBaseExtended, OslButton, OslCheckbox, OslDatepicker, OslFileUpload, OslFormGrid, OslGrid, OslRadio, OslSearchbar, OslSelect, OslSetup, OslSkeletonDirective, OslSkeletonModule, OslSkeletonThemeService, OslSlideToggle, Oslinput, Osltextarea, baseComponent };
|
|
2451
2490
|
//# sourceMappingURL=osl-base-extended.mjs.map
|