@tacdaed/fragments 1.0.0-beta.18 → 1.0.0-beta.19
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.
- package/fesm2022/tacdaed-fragments.mjs +554 -15
- package/index.d.ts +170 -9
- package/package.json +1 -1
|
@@ -3218,6 +3218,10 @@ class InputTextComponent extends InputBase {
|
|
|
3218
3218
|
* @inheritdoc
|
|
3219
3219
|
*/
|
|
3220
3220
|
this.errorMessages = {};
|
|
3221
|
+
/**
|
|
3222
|
+
* Accent color style for border/focus.
|
|
3223
|
+
*/
|
|
3224
|
+
this.styleType = 'primary';
|
|
3221
3225
|
/**
|
|
3222
3226
|
* The type of the input element.
|
|
3223
3227
|
* Can be 'text', 'password', 'email', 'tel', etc.
|
|
@@ -3373,11 +3377,11 @@ class InputTextComponent extends InputBase {
|
|
|
3373
3377
|
this.control?.updateValueAndValidity();
|
|
3374
3378
|
}
|
|
3375
3379
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTextComponent, isStandalone: true, selector: "frg-input-text", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
3380
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTextComponent, isStandalone: true, selector: "frg-input-text", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if(type === 'password') {\r\n <ng-container *ngTemplateOutlet=\"passwordToggleTemplate\"></ng-container>\r\n }\r\n @else if(type === 'email') {\r\n <ng-container *ngTemplateOutlet=\"emailExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'tel') {\r\n <ng-container *ngTemplateOutlet=\"phoneExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'url') {\r\n <ng-container *ngTemplateOutlet=\"urlExtraTemplate\"></ng-container>\r\n }\r\n\r\n</div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n }\r\n\r\n<!-- Templates -->\r\n<ng-template #passwordToggleTemplate>\r\n <button type=\"button\" class=\"frg-input__toggle-password\" (click)=\"toggleShowPassword()\">\r\n @if(showPassword){\r\n <span class=\"far fa-eye-slash\"></span>\r\n } @else {\r\n <span class=\"far fa-eye\"></span>\r\n }\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #emailExtraTemplate>\r\n <div class=\"frg-input__email-container\">\r\n <span class=\"far fa-envelope\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneExtraTemplate>\r\n <div class=\"frg-input__phone-container\">\r\n <span class=\"fas fa-mobile-screen\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #urlExtraTemplate>\r\n <div class=\"frg-input__url-container\">\r\n <span class=\"fas fa-link\"></span>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper input{padding:.25rem .5rem;border:none;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper input:focus{outline:none}:host .frg-input__wrapper input:has(+.frg-input__toggle-password){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__email-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__phone-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__url-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper.input-error input{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(input:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}:host .frg-input__toggle-password,:host .frg-input__email-container,:host .frg-input__phone-container,:host .frg-input__url-container{position:absolute;top:50%;right:.25rem;background:transparent;border:none;font-size:1rem;color:#5e5f62;padding:0}:host .frg-input__toggle-password{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3377
3381
|
}
|
|
3378
3382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
3379
3383
|
type: Component,
|
|
3380
|
-
args: [{ selector: 'frg-input-text', imports: [InputRequiredLabelPipe, NgTemplateOutlet, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
3384
|
+
args: [{ selector: 'frg-input-text', imports: [InputRequiredLabelPipe, NgTemplateOutlet, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if(type === 'password') {\r\n <ng-container *ngTemplateOutlet=\"passwordToggleTemplate\"></ng-container>\r\n }\r\n @else if(type === 'email') {\r\n <ng-container *ngTemplateOutlet=\"emailExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'tel') {\r\n <ng-container *ngTemplateOutlet=\"phoneExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'url') {\r\n <ng-container *ngTemplateOutlet=\"urlExtraTemplate\"></ng-container>\r\n }\r\n\r\n</div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n }\r\n\r\n<!-- Templates -->\r\n<ng-template #passwordToggleTemplate>\r\n <button type=\"button\" class=\"frg-input__toggle-password\" (click)=\"toggleShowPassword()\">\r\n @if(showPassword){\r\n <span class=\"far fa-eye-slash\"></span>\r\n } @else {\r\n <span class=\"far fa-eye\"></span>\r\n }\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #emailExtraTemplate>\r\n <div class=\"frg-input__email-container\">\r\n <span class=\"far fa-envelope\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneExtraTemplate>\r\n <div class=\"frg-input__phone-container\">\r\n <span class=\"fas fa-mobile-screen\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #urlExtraTemplate>\r\n <div class=\"frg-input__url-container\">\r\n <span class=\"fas fa-link\"></span>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper input{padding:.25rem .5rem;border:none;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper input:focus{outline:none}:host .frg-input__wrapper input:has(+.frg-input__toggle-password){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__email-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__phone-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__url-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper.input-error input{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(input:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}:host .frg-input__toggle-password,:host .frg-input__email-container,:host .frg-input__phone-container,:host .frg-input__url-container{position:absolute;top:50%;right:.25rem;background:transparent;border:none;font-size:1rem;color:#5e5f62;padding:0}:host .frg-input__toggle-password{cursor:pointer}\n"] }]
|
|
3381
3385
|
}], propDecorators: { label: [{
|
|
3382
3386
|
type: Input
|
|
3383
3387
|
}], placeholder: [{
|
|
@@ -3388,12 +3392,511 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
3388
3392
|
type: Input
|
|
3389
3393
|
}], errorMessages: [{
|
|
3390
3394
|
type: Input
|
|
3395
|
+
}], styleType: [{
|
|
3396
|
+
type: Input
|
|
3391
3397
|
}], type: [{
|
|
3392
3398
|
type: Input
|
|
3393
3399
|
}], validatorStrictMode: [{
|
|
3394
3400
|
type: Input
|
|
3395
3401
|
}] } });
|
|
3396
3402
|
|
|
3403
|
+
class InputTextareaComponent extends InputBase {
|
|
3404
|
+
constructor() {
|
|
3405
|
+
super(...arguments);
|
|
3406
|
+
/**
|
|
3407
|
+
* @inheritdoc
|
|
3408
|
+
*/
|
|
3409
|
+
this.label = '';
|
|
3410
|
+
/**
|
|
3411
|
+
* @inheritdoc
|
|
3412
|
+
*/
|
|
3413
|
+
this.placeholder = '';
|
|
3414
|
+
/**
|
|
3415
|
+
* @inheritdoc
|
|
3416
|
+
*/
|
|
3417
|
+
this.required = false;
|
|
3418
|
+
/**
|
|
3419
|
+
* @inheritdoc
|
|
3420
|
+
*/
|
|
3421
|
+
this.showValidation = true;
|
|
3422
|
+
/**
|
|
3423
|
+
* @inheritdoc
|
|
3424
|
+
*/
|
|
3425
|
+
this.errorMessages = {};
|
|
3426
|
+
/**
|
|
3427
|
+
* Accent color style for border/focus.
|
|
3428
|
+
*/
|
|
3429
|
+
this.styleType = 'primary';
|
|
3430
|
+
/**
|
|
3431
|
+
* Number of visible text rows.
|
|
3432
|
+
*/
|
|
3433
|
+
this.rows = 4;
|
|
3434
|
+
/**
|
|
3435
|
+
* CSS resize behavior for the textarea.
|
|
3436
|
+
*/
|
|
3437
|
+
this.resize = 'vertical';
|
|
3438
|
+
/**
|
|
3439
|
+
* Maximum allowed length for textarea content.
|
|
3440
|
+
*/
|
|
3441
|
+
this.maxLength = null;
|
|
3442
|
+
}
|
|
3443
|
+
get errorList() {
|
|
3444
|
+
if (!this.control?.errors)
|
|
3445
|
+
return [];
|
|
3446
|
+
const errors = this.control.errors;
|
|
3447
|
+
return Object.keys(errors).map((key) => {
|
|
3448
|
+
if (this.errorMessages[key]) {
|
|
3449
|
+
return this.errorMessages[key];
|
|
3450
|
+
}
|
|
3451
|
+
if (key === 'minlength' && errors[key]?.requiredLength) {
|
|
3452
|
+
return `Minimum length is ${errors[key].requiredLength} characters.`;
|
|
3453
|
+
}
|
|
3454
|
+
if (key === 'maxlength' && errors[key]?.requiredLength) {
|
|
3455
|
+
return `Maximum length is ${errors[key].requiredLength} characters.`;
|
|
3456
|
+
}
|
|
3457
|
+
return DEFAULT_INPUT_TEXT_ERROR_MESSAGES[key] || 'Invalid field.';
|
|
3458
|
+
});
|
|
3459
|
+
}
|
|
3460
|
+
get warningList() {
|
|
3461
|
+
return Object.keys(this.warningMessages).map((key) => {
|
|
3462
|
+
return (this.warningMessages[key] ||
|
|
3463
|
+
DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES[key] ||
|
|
3464
|
+
'');
|
|
3465
|
+
});
|
|
3466
|
+
}
|
|
3467
|
+
get hasWarning() {
|
|
3468
|
+
return this.warningList.length > 0;
|
|
3469
|
+
}
|
|
3470
|
+
onInput(event) {
|
|
3471
|
+
const input = event.target;
|
|
3472
|
+
this.value = input.value;
|
|
3473
|
+
this.onChange(this.value);
|
|
3474
|
+
}
|
|
3475
|
+
onBlur() {
|
|
3476
|
+
this.onTouched();
|
|
3477
|
+
}
|
|
3478
|
+
updateView(_value) {
|
|
3479
|
+
// Handled by Angular binding
|
|
3480
|
+
}
|
|
3481
|
+
updateDisabledState(_isDisabled) {
|
|
3482
|
+
// Handled by Angular binding
|
|
3483
|
+
}
|
|
3484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTextareaComponent, isStandalone: true, selector: "frg-input-textarea", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", rows: "rows", resize: "resize", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n <textarea\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [rows]=\"rows\"\n [style.resize]=\"resize\"\n [attr.maxlength]=\"maxLength\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n ></textarea>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper textarea{display:block;width:100%;min-height:2.25rem;padding:.25rem .5rem;border:none;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper textarea:focus{outline:none}:host .frg-input__wrapper.input-error textarea{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(textarea:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3486
|
+
}
|
|
3487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextareaComponent, decorators: [{
|
|
3488
|
+
type: Component,
|
|
3489
|
+
args: [{ selector: 'frg-input-textarea', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n <textarea\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [rows]=\"rows\"\n [style.resize]=\"resize\"\n [attr.maxlength]=\"maxLength\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n ></textarea>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper textarea{display:block;width:100%;min-height:2.25rem;padding:.25rem .5rem;border:none;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper textarea:focus{outline:none}:host .frg-input__wrapper.input-error textarea{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(textarea:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}\n"] }]
|
|
3490
|
+
}], propDecorators: { label: [{
|
|
3491
|
+
type: Input
|
|
3492
|
+
}], placeholder: [{
|
|
3493
|
+
type: Input
|
|
3494
|
+
}], required: [{
|
|
3495
|
+
type: Input
|
|
3496
|
+
}], showValidation: [{
|
|
3497
|
+
type: Input
|
|
3498
|
+
}], errorMessages: [{
|
|
3499
|
+
type: Input
|
|
3500
|
+
}], styleType: [{
|
|
3501
|
+
type: Input
|
|
3502
|
+
}], rows: [{
|
|
3503
|
+
type: Input
|
|
3504
|
+
}], resize: [{
|
|
3505
|
+
type: Input
|
|
3506
|
+
}], maxLength: [{
|
|
3507
|
+
type: Input
|
|
3508
|
+
}] } });
|
|
3509
|
+
|
|
3510
|
+
class InputRichTextComponent extends InputBase {
|
|
3511
|
+
constructor() {
|
|
3512
|
+
super(...arguments);
|
|
3513
|
+
/**
|
|
3514
|
+
* @inheritdoc
|
|
3515
|
+
*/
|
|
3516
|
+
this.label = '';
|
|
3517
|
+
/**
|
|
3518
|
+
* @inheritdoc
|
|
3519
|
+
*/
|
|
3520
|
+
this.placeholder = '';
|
|
3521
|
+
/**
|
|
3522
|
+
* @inheritdoc
|
|
3523
|
+
*/
|
|
3524
|
+
this.required = false;
|
|
3525
|
+
/**
|
|
3526
|
+
* @inheritdoc
|
|
3527
|
+
*/
|
|
3528
|
+
this.showValidation = true;
|
|
3529
|
+
/**
|
|
3530
|
+
* @inheritdoc
|
|
3531
|
+
*/
|
|
3532
|
+
this.errorMessages = {};
|
|
3533
|
+
/**
|
|
3534
|
+
* Accent color style for border/focus.
|
|
3535
|
+
*/
|
|
3536
|
+
this.styleType = 'primary';
|
|
3537
|
+
/**
|
|
3538
|
+
* Minimum editor height.
|
|
3539
|
+
*/
|
|
3540
|
+
this.minHeight = '10rem';
|
|
3541
|
+
/**
|
|
3542
|
+
* Show or hide toolbar actions.
|
|
3543
|
+
*/
|
|
3544
|
+
this.showToolbar = true;
|
|
3545
|
+
this.commandStates = {
|
|
3546
|
+
bold: false,
|
|
3547
|
+
italic: false,
|
|
3548
|
+
underline: false,
|
|
3549
|
+
insertUnorderedList: false,
|
|
3550
|
+
insertOrderedList: false,
|
|
3551
|
+
};
|
|
3552
|
+
}
|
|
3553
|
+
get errorList() {
|
|
3554
|
+
if (!this.control?.errors)
|
|
3555
|
+
return [];
|
|
3556
|
+
const errors = this.control.errors;
|
|
3557
|
+
return Object.keys(errors).map((key) => {
|
|
3558
|
+
if (this.errorMessages[key]) {
|
|
3559
|
+
return this.errorMessages[key];
|
|
3560
|
+
}
|
|
3561
|
+
if (key === 'minlength' && errors[key]?.requiredLength) {
|
|
3562
|
+
return `Minimum length is ${errors[key].requiredLength} characters.`;
|
|
3563
|
+
}
|
|
3564
|
+
if (key === 'maxlength' && errors[key]?.requiredLength) {
|
|
3565
|
+
return `Maximum length is ${errors[key].requiredLength} characters.`;
|
|
3566
|
+
}
|
|
3567
|
+
return DEFAULT_INPUT_TEXT_ERROR_MESSAGES[key] || 'Invalid field.';
|
|
3568
|
+
});
|
|
3569
|
+
}
|
|
3570
|
+
get warningList() {
|
|
3571
|
+
return Object.keys(this.warningMessages).map((key) => {
|
|
3572
|
+
return (this.warningMessages[key] ||
|
|
3573
|
+
DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES[key] ||
|
|
3574
|
+
'');
|
|
3575
|
+
});
|
|
3576
|
+
}
|
|
3577
|
+
get hasWarning() {
|
|
3578
|
+
return this.warningList.length > 0;
|
|
3579
|
+
}
|
|
3580
|
+
ngAfterViewInit() {
|
|
3581
|
+
this.updateView(this.value ?? '');
|
|
3582
|
+
this.syncCommandStates();
|
|
3583
|
+
}
|
|
3584
|
+
onInput() {
|
|
3585
|
+
const editor = this.editorRef?.nativeElement;
|
|
3586
|
+
if (!editor)
|
|
3587
|
+
return;
|
|
3588
|
+
this.value = this.normalizeHtml(editor.innerHTML);
|
|
3589
|
+
this.onChange(this.value);
|
|
3590
|
+
this.syncCommandStates();
|
|
3591
|
+
}
|
|
3592
|
+
onEditorKeyUp() {
|
|
3593
|
+
this.onInput();
|
|
3594
|
+
}
|
|
3595
|
+
onEditorSelectionChange() {
|
|
3596
|
+
this.syncCommandStates();
|
|
3597
|
+
}
|
|
3598
|
+
onEditorKeyDown(event) {
|
|
3599
|
+
if (event.key !== 'Tab' || this.disabled) {
|
|
3600
|
+
return;
|
|
3601
|
+
}
|
|
3602
|
+
const li = this.getCurrentListItem();
|
|
3603
|
+
if (!li) {
|
|
3604
|
+
return;
|
|
3605
|
+
}
|
|
3606
|
+
event.preventDefault();
|
|
3607
|
+
if (event.shiftKey) {
|
|
3608
|
+
this.outdentListItem(li);
|
|
3609
|
+
}
|
|
3610
|
+
else {
|
|
3611
|
+
this.indentListItem(li);
|
|
3612
|
+
}
|
|
3613
|
+
this.onInput();
|
|
3614
|
+
}
|
|
3615
|
+
onBlur() {
|
|
3616
|
+
this.onTouched();
|
|
3617
|
+
this.syncCommandStates();
|
|
3618
|
+
}
|
|
3619
|
+
execute(command) {
|
|
3620
|
+
if (this.disabled)
|
|
3621
|
+
return;
|
|
3622
|
+
this.focusEditor();
|
|
3623
|
+
switch (command) {
|
|
3624
|
+
case 'bold':
|
|
3625
|
+
this.applyInlineFormat('strong');
|
|
3626
|
+
break;
|
|
3627
|
+
case 'italic':
|
|
3628
|
+
this.applyInlineFormat('em');
|
|
3629
|
+
break;
|
|
3630
|
+
case 'underline':
|
|
3631
|
+
this.applyInlineFormat('u');
|
|
3632
|
+
break;
|
|
3633
|
+
case 'insertUnorderedList':
|
|
3634
|
+
this.toggleList('ul');
|
|
3635
|
+
break;
|
|
3636
|
+
case 'insertOrderedList':
|
|
3637
|
+
this.toggleList('ol');
|
|
3638
|
+
break;
|
|
3639
|
+
default:
|
|
3640
|
+
return;
|
|
3641
|
+
}
|
|
3642
|
+
this.onInput();
|
|
3643
|
+
}
|
|
3644
|
+
setTextColor(event) {
|
|
3645
|
+
if (this.disabled)
|
|
3646
|
+
return;
|
|
3647
|
+
const color = event.target.value;
|
|
3648
|
+
this.focusEditor();
|
|
3649
|
+
this.applyColor(color);
|
|
3650
|
+
this.onInput();
|
|
3651
|
+
}
|
|
3652
|
+
isCommandActive(command) {
|
|
3653
|
+
return this.commandStates[command];
|
|
3654
|
+
}
|
|
3655
|
+
preventToolbarMouseDown(event) {
|
|
3656
|
+
event.preventDefault();
|
|
3657
|
+
}
|
|
3658
|
+
updateView(value) {
|
|
3659
|
+
const editor = this.editorRef?.nativeElement;
|
|
3660
|
+
if (!editor)
|
|
3661
|
+
return;
|
|
3662
|
+
editor.innerHTML = value ?? '';
|
|
3663
|
+
}
|
|
3664
|
+
updateDisabledState(isDisabled) {
|
|
3665
|
+
const editor = this.editorRef?.nativeElement;
|
|
3666
|
+
if (!editor)
|
|
3667
|
+
return;
|
|
3668
|
+
editor.contentEditable = isDisabled ? 'false' : 'true';
|
|
3669
|
+
}
|
|
3670
|
+
focusEditor() {
|
|
3671
|
+
this.editorRef?.nativeElement.focus();
|
|
3672
|
+
}
|
|
3673
|
+
applyInlineFormat(tagName) {
|
|
3674
|
+
const range = this.getCurrentRange();
|
|
3675
|
+
if (!range || range.collapsed) {
|
|
3676
|
+
return;
|
|
3677
|
+
}
|
|
3678
|
+
const wrapper = document.createElement(tagName);
|
|
3679
|
+
this.wrapRange(range, wrapper);
|
|
3680
|
+
}
|
|
3681
|
+
applyColor(color) {
|
|
3682
|
+
const range = this.getCurrentRange();
|
|
3683
|
+
if (!range || range.collapsed) {
|
|
3684
|
+
return;
|
|
3685
|
+
}
|
|
3686
|
+
const wrapper = document.createElement('span');
|
|
3687
|
+
wrapper.style.color = color;
|
|
3688
|
+
this.wrapRange(range, wrapper);
|
|
3689
|
+
}
|
|
3690
|
+
wrapRange(range, wrapper) {
|
|
3691
|
+
const extracted = range.extractContents();
|
|
3692
|
+
if (!extracted.textContent?.trim()) {
|
|
3693
|
+
range.insertNode(extracted);
|
|
3694
|
+
return;
|
|
3695
|
+
}
|
|
3696
|
+
wrapper.appendChild(extracted);
|
|
3697
|
+
range.insertNode(wrapper);
|
|
3698
|
+
const selection = document.getSelection();
|
|
3699
|
+
if (!selection)
|
|
3700
|
+
return;
|
|
3701
|
+
const newRange = document.createRange();
|
|
3702
|
+
newRange.selectNodeContents(wrapper);
|
|
3703
|
+
selection.removeAllRanges();
|
|
3704
|
+
selection.addRange(newRange);
|
|
3705
|
+
}
|
|
3706
|
+
toggleList(type) {
|
|
3707
|
+
const listItem = this.getCurrentListItem();
|
|
3708
|
+
if (listItem) {
|
|
3709
|
+
const list = listItem.parentElement;
|
|
3710
|
+
if (!list)
|
|
3711
|
+
return;
|
|
3712
|
+
if (list.tagName.toLowerCase() === type) {
|
|
3713
|
+
this.unwrapList(list);
|
|
3714
|
+
return;
|
|
3715
|
+
}
|
|
3716
|
+
this.convertListType(list, type);
|
|
3717
|
+
return;
|
|
3718
|
+
}
|
|
3719
|
+
const range = this.getCurrentRange();
|
|
3720
|
+
if (!range)
|
|
3721
|
+
return;
|
|
3722
|
+
const content = range.extractContents();
|
|
3723
|
+
const list = document.createElement(type);
|
|
3724
|
+
const li = document.createElement('li');
|
|
3725
|
+
li.appendChild(content);
|
|
3726
|
+
if (!li.textContent?.trim()) {
|
|
3727
|
+
li.textContent = 'List item';
|
|
3728
|
+
}
|
|
3729
|
+
list.appendChild(li);
|
|
3730
|
+
range.insertNode(list);
|
|
3731
|
+
this.placeCaretAtEnd(li);
|
|
3732
|
+
}
|
|
3733
|
+
unwrapList(list) {
|
|
3734
|
+
const fragment = document.createDocumentFragment();
|
|
3735
|
+
const items = Array.from(list.children).filter((child) => child.tagName === 'LI');
|
|
3736
|
+
items.forEach((item) => {
|
|
3737
|
+
const p = document.createElement('p');
|
|
3738
|
+
while (item.firstChild) {
|
|
3739
|
+
p.appendChild(item.firstChild);
|
|
3740
|
+
}
|
|
3741
|
+
fragment.appendChild(p);
|
|
3742
|
+
});
|
|
3743
|
+
list.replaceWith(fragment);
|
|
3744
|
+
}
|
|
3745
|
+
convertListType(list, type) {
|
|
3746
|
+
const nextList = document.createElement(type);
|
|
3747
|
+
while (list.firstChild) {
|
|
3748
|
+
nextList.appendChild(list.firstChild);
|
|
3749
|
+
}
|
|
3750
|
+
list.replaceWith(nextList);
|
|
3751
|
+
}
|
|
3752
|
+
getCurrentListItem() {
|
|
3753
|
+
const editor = this.editorRef?.nativeElement;
|
|
3754
|
+
const anchorElement = this.getSelectionAnchorElement();
|
|
3755
|
+
if (!editor || !anchorElement) {
|
|
3756
|
+
return null;
|
|
3757
|
+
}
|
|
3758
|
+
const li = this.findClosestTag(anchorElement, 'LI');
|
|
3759
|
+
return li && editor.contains(li) ? li : null;
|
|
3760
|
+
}
|
|
3761
|
+
indentListItem(li) {
|
|
3762
|
+
const parentList = li.parentElement;
|
|
3763
|
+
if (!parentList)
|
|
3764
|
+
return;
|
|
3765
|
+
const previousLi = li.previousElementSibling;
|
|
3766
|
+
if (!previousLi)
|
|
3767
|
+
return;
|
|
3768
|
+
let nestedList = Array.from(previousLi.children).find((child) => child.tagName === parentList.tagName);
|
|
3769
|
+
if (!nestedList) {
|
|
3770
|
+
nestedList = document.createElement(parentList.tagName.toLowerCase());
|
|
3771
|
+
previousLi.appendChild(nestedList);
|
|
3772
|
+
}
|
|
3773
|
+
nestedList.appendChild(li);
|
|
3774
|
+
this.placeCaretAtEnd(li);
|
|
3775
|
+
}
|
|
3776
|
+
outdentListItem(li) {
|
|
3777
|
+
const parentList = li.parentElement;
|
|
3778
|
+
if (!parentList)
|
|
3779
|
+
return;
|
|
3780
|
+
const parentLi = this.findClosestTag(parentList, 'LI');
|
|
3781
|
+
if (!parentLi)
|
|
3782
|
+
return;
|
|
3783
|
+
const grandList = parentLi.parentElement;
|
|
3784
|
+
if (!grandList)
|
|
3785
|
+
return;
|
|
3786
|
+
grandList.insertBefore(li, parentLi.nextSibling);
|
|
3787
|
+
if (!parentList.children.length) {
|
|
3788
|
+
parentList.remove();
|
|
3789
|
+
}
|
|
3790
|
+
this.placeCaretAtEnd(li);
|
|
3791
|
+
}
|
|
3792
|
+
getCurrentRange() {
|
|
3793
|
+
const selection = document.getSelection();
|
|
3794
|
+
if (!selection || selection.rangeCount === 0) {
|
|
3795
|
+
return null;
|
|
3796
|
+
}
|
|
3797
|
+
const range = selection.getRangeAt(0);
|
|
3798
|
+
const editor = this.editorRef?.nativeElement;
|
|
3799
|
+
if (!editor) {
|
|
3800
|
+
return null;
|
|
3801
|
+
}
|
|
3802
|
+
const container = range.commonAncestorContainer;
|
|
3803
|
+
const insideEditor = container === editor || editor.contains(container);
|
|
3804
|
+
return insideEditor ? range : null;
|
|
3805
|
+
}
|
|
3806
|
+
getSelectionAnchorElement() {
|
|
3807
|
+
const selection = document.getSelection();
|
|
3808
|
+
const anchor = selection?.anchorNode ?? null;
|
|
3809
|
+
if (!anchor) {
|
|
3810
|
+
return null;
|
|
3811
|
+
}
|
|
3812
|
+
return anchor.nodeType === Node.ELEMENT_NODE
|
|
3813
|
+
? anchor
|
|
3814
|
+
: anchor.parentElement;
|
|
3815
|
+
}
|
|
3816
|
+
findClosestTag(from, tagName) {
|
|
3817
|
+
let current = from;
|
|
3818
|
+
while (current) {
|
|
3819
|
+
if (current.tagName === tagName) {
|
|
3820
|
+
return current;
|
|
3821
|
+
}
|
|
3822
|
+
current = current.parentElement;
|
|
3823
|
+
}
|
|
3824
|
+
return null;
|
|
3825
|
+
}
|
|
3826
|
+
syncCommandStates() {
|
|
3827
|
+
const editor = this.editorRef?.nativeElement;
|
|
3828
|
+
const anchorElement = this.getSelectionAnchorElement();
|
|
3829
|
+
if (!editor || !anchorElement || !editor.contains(anchorElement)) {
|
|
3830
|
+
this.commandStates.bold = false;
|
|
3831
|
+
this.commandStates.italic = false;
|
|
3832
|
+
this.commandStates.underline = false;
|
|
3833
|
+
this.commandStates.insertUnorderedList = false;
|
|
3834
|
+
this.commandStates.insertOrderedList = false;
|
|
3835
|
+
return;
|
|
3836
|
+
}
|
|
3837
|
+
this.commandStates.bold = this.hasAnyAncestorTag(anchorElement, ['B', 'STRONG']);
|
|
3838
|
+
this.commandStates.italic = this.hasAnyAncestorTag(anchorElement, ['I', 'EM']);
|
|
3839
|
+
this.commandStates.underline = this.hasAnyAncestorTag(anchorElement, ['U']);
|
|
3840
|
+
this.commandStates.insertUnorderedList = this.hasAnyAncestorTag(anchorElement, ['UL']);
|
|
3841
|
+
this.commandStates.insertOrderedList = this.hasAnyAncestorTag(anchorElement, ['OL']);
|
|
3842
|
+
}
|
|
3843
|
+
hasAnyAncestorTag(from, tags) {
|
|
3844
|
+
let current = from;
|
|
3845
|
+
while (current) {
|
|
3846
|
+
if (tags.includes(current.tagName)) {
|
|
3847
|
+
return true;
|
|
3848
|
+
}
|
|
3849
|
+
current = current.parentElement;
|
|
3850
|
+
}
|
|
3851
|
+
return false;
|
|
3852
|
+
}
|
|
3853
|
+
placeCaretAtEnd(element) {
|
|
3854
|
+
const range = document.createRange();
|
|
3855
|
+
range.selectNodeContents(element);
|
|
3856
|
+
range.collapse(false);
|
|
3857
|
+
const selection = document.getSelection();
|
|
3858
|
+
if (!selection) {
|
|
3859
|
+
return;
|
|
3860
|
+
}
|
|
3861
|
+
selection.removeAllRanges();
|
|
3862
|
+
selection.addRange(range);
|
|
3863
|
+
}
|
|
3864
|
+
normalizeHtml(rawHtml) {
|
|
3865
|
+
const temp = document.createElement('div');
|
|
3866
|
+
temp.innerHTML = rawHtml;
|
|
3867
|
+
const textOnly = (temp.textContent || '').replaceAll('\u00a0', ' ').trim();
|
|
3868
|
+
if (!textOnly) {
|
|
3869
|
+
return '';
|
|
3870
|
+
}
|
|
3871
|
+
return rawHtml;
|
|
3872
|
+
}
|
|
3873
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputRichTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3874
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputRichTextComponent, isStandalone: true, selector: "frg-input-rich-text", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", minHeight: "minHeight", showToolbar: "showToolbar" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary',\n 'frg-input__wrapper--no-toolbar': !showToolbar\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n @if(showToolbar) {\n <div class=\"frg-input__toolbar\">\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('bold')\"\n [class.is-active]=\"isCommandActive('bold')\"\n [disabled]=\"disabled\"\n aria-label=\"Bold\"\n title=\"Bold\"\n >\n <strong>B</strong>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('italic')\"\n [class.is-active]=\"isCommandActive('italic')\"\n [disabled]=\"disabled\"\n aria-label=\"Italic\"\n title=\"Italic\"\n >\n <em>I</em>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('underline')\"\n [class.is-active]=\"isCommandActive('underline')\"\n [disabled]=\"disabled\"\n aria-label=\"Underline\"\n title=\"Underline\"\n >\n <u>U</u>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertUnorderedList')\"\n [class.is-active]=\"isCommandActive('insertUnorderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Bullet list\"\n title=\"Bullet list\"\n >\n <span class=\"fas fa-list-ul\" aria-hidden=\"true\"></span>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertOrderedList')\"\n [class.is-active]=\"isCommandActive('insertOrderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Numbered list\"\n title=\"Numbered list\"\n >\n <span class=\"fas fa-list-ol\" aria-hidden=\"true\"></span>\n </button>\n <label class=\"frg-input__toolbar-color\" [attr.for]=\"id + '-text-color'\" aria-label=\"Text color\">\n <input\n [id]=\"id + '-text-color'\"\n type=\"color\"\n [disabled]=\"disabled\"\n value=\"#1f2937\"\n (input)=\"setTextColor($event)\"\n />\n </label>\n </div>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n #editor\n class=\"frg-input__editor\"\n [id]=\"id\"\n [attr.data-placeholder]=\"placeholder\"\n [style.min-height]=\"minHeight\"\n [attr.contenteditable]=\"disabled ? 'false' : 'true'\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-label]=\"label || placeholder || 'Rich text editor'\"\n (input)=\"onInput()\"\n (keydown)=\"onEditorKeyDown($event)\"\n (keyup)=\"onEditorKeyUp()\"\n (mouseup)=\"onEditorSelectionChange()\"\n (focus)=\"onEditorSelectionChange()\"\n (blur)=\"onBlur()\"\n ></div>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__toolbar{display:flex;flex-wrap:wrap;gap:.375rem;padding:.375rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:none;border-radius:.25rem .25rem 0 0;background:#f9fafb}:host .frg-input__toolbar button{border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:#fff;color:#5e5f62;border-radius:.25rem;line-height:1;padding:.375rem .5rem;cursor:pointer}:host .frg-input__toolbar button.is-active{border-color:var(--frg-input-accent);box-shadow:inset 0 0 0 1px var(--frg-input-accent);background:#eef6ff}:host .frg-input__toolbar button:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__toolbar-color{display:inline-flex;align-items:center}:host .frg-input__toolbar-color input{width:1.75rem;height:1.75rem;padding:0;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;background:#fff;cursor:pointer}:host .frg-input__toolbar-color input:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__editor{width:100%;padding:.25rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:0 0 .25rem .25rem;background:transparent;transition:border-color .3s;overflow-y:auto}:host .frg-input__editor:focus{outline:none;border-bottom-color:var(--frg-input-accent)}:host .frg-input__editor:empty:before{content:attr(data-placeholder);color:#1f293773;pointer-events:none}:host .frg-input__wrapper--no-toolbar :host .frg-input__editor{border-radius:.25rem}:host .frg-input__wrapper.input-error :host .frg-input__editor{border-color:#d66a6a;border-bottom-color:#d66a6a}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3875
|
+
}
|
|
3876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputRichTextComponent, decorators: [{
|
|
3877
|
+
type: Component,
|
|
3878
|
+
args: [{ selector: 'frg-input-rich-text', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary',\n 'frg-input__wrapper--no-toolbar': !showToolbar\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n @if(showToolbar) {\n <div class=\"frg-input__toolbar\">\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('bold')\"\n [class.is-active]=\"isCommandActive('bold')\"\n [disabled]=\"disabled\"\n aria-label=\"Bold\"\n title=\"Bold\"\n >\n <strong>B</strong>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('italic')\"\n [class.is-active]=\"isCommandActive('italic')\"\n [disabled]=\"disabled\"\n aria-label=\"Italic\"\n title=\"Italic\"\n >\n <em>I</em>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('underline')\"\n [class.is-active]=\"isCommandActive('underline')\"\n [disabled]=\"disabled\"\n aria-label=\"Underline\"\n title=\"Underline\"\n >\n <u>U</u>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertUnorderedList')\"\n [class.is-active]=\"isCommandActive('insertUnorderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Bullet list\"\n title=\"Bullet list\"\n >\n <span class=\"fas fa-list-ul\" aria-hidden=\"true\"></span>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertOrderedList')\"\n [class.is-active]=\"isCommandActive('insertOrderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Numbered list\"\n title=\"Numbered list\"\n >\n <span class=\"fas fa-list-ol\" aria-hidden=\"true\"></span>\n </button>\n <label class=\"frg-input__toolbar-color\" [attr.for]=\"id + '-text-color'\" aria-label=\"Text color\">\n <input\n [id]=\"id + '-text-color'\"\n type=\"color\"\n [disabled]=\"disabled\"\n value=\"#1f2937\"\n (input)=\"setTextColor($event)\"\n />\n </label>\n </div>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n #editor\n class=\"frg-input__editor\"\n [id]=\"id\"\n [attr.data-placeholder]=\"placeholder\"\n [style.min-height]=\"minHeight\"\n [attr.contenteditable]=\"disabled ? 'false' : 'true'\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-label]=\"label || placeholder || 'Rich text editor'\"\n (input)=\"onInput()\"\n (keydown)=\"onEditorKeyDown($event)\"\n (keyup)=\"onEditorKeyUp()\"\n (mouseup)=\"onEditorSelectionChange()\"\n (focus)=\"onEditorSelectionChange()\"\n (blur)=\"onBlur()\"\n ></div>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__toolbar{display:flex;flex-wrap:wrap;gap:.375rem;padding:.375rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:none;border-radius:.25rem .25rem 0 0;background:#f9fafb}:host .frg-input__toolbar button{border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:#fff;color:#5e5f62;border-radius:.25rem;line-height:1;padding:.375rem .5rem;cursor:pointer}:host .frg-input__toolbar button.is-active{border-color:var(--frg-input-accent);box-shadow:inset 0 0 0 1px var(--frg-input-accent);background:#eef6ff}:host .frg-input__toolbar button:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__toolbar-color{display:inline-flex;align-items:center}:host .frg-input__toolbar-color input{width:1.75rem;height:1.75rem;padding:0;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;background:#fff;cursor:pointer}:host .frg-input__toolbar-color input:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__editor{width:100%;padding:.25rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:0 0 .25rem .25rem;background:transparent;transition:border-color .3s;overflow-y:auto}:host .frg-input__editor:focus{outline:none;border-bottom-color:var(--frg-input-accent)}:host .frg-input__editor:empty:before{content:attr(data-placeholder);color:#1f293773;pointer-events:none}:host .frg-input__wrapper--no-toolbar :host .frg-input__editor{border-radius:.25rem}:host .frg-input__wrapper.input-error :host .frg-input__editor{border-color:#d66a6a;border-bottom-color:#d66a6a}\n"] }]
|
|
3879
|
+
}], propDecorators: { editorRef: [{
|
|
3880
|
+
type: ViewChild,
|
|
3881
|
+
args: ['editor']
|
|
3882
|
+
}], label: [{
|
|
3883
|
+
type: Input
|
|
3884
|
+
}], placeholder: [{
|
|
3885
|
+
type: Input
|
|
3886
|
+
}], required: [{
|
|
3887
|
+
type: Input
|
|
3888
|
+
}], showValidation: [{
|
|
3889
|
+
type: Input
|
|
3890
|
+
}], errorMessages: [{
|
|
3891
|
+
type: Input
|
|
3892
|
+
}], styleType: [{
|
|
3893
|
+
type: Input
|
|
3894
|
+
}], minHeight: [{
|
|
3895
|
+
type: Input
|
|
3896
|
+
}], showToolbar: [{
|
|
3897
|
+
type: Input
|
|
3898
|
+
}] } });
|
|
3899
|
+
|
|
3397
3900
|
/**
|
|
3398
3901
|
* Normalizes the value of an <input type="number">.
|
|
3399
3902
|
*
|
|
@@ -3434,6 +3937,10 @@ class InputNumberComponent extends InputBase {
|
|
|
3434
3937
|
* @inheritdoc
|
|
3435
3938
|
*/
|
|
3436
3939
|
this.errorMessages = {};
|
|
3940
|
+
/**
|
|
3941
|
+
* Accent color style for border/focus.
|
|
3942
|
+
*/
|
|
3943
|
+
this.styleType = 'primary';
|
|
3437
3944
|
/**
|
|
3438
3945
|
* The type of the input element.
|
|
3439
3946
|
* Can be 'number' or 'decimal'.
|
|
@@ -3706,11 +4213,11 @@ class InputNumberComponent extends InputBase {
|
|
|
3706
4213
|
return num.toString().split('.')[1]?.length ?? 0;
|
|
3707
4214
|
}
|
|
3708
4215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3709
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputNumberComponent, isStandalone: true, selector: "frg-input-number", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", min: "min", max: "max", step: "step", precision: "precision", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
4216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputNumberComponent, isStandalone: true, selector: "frg-input-number", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", min: "min", max: "max", step: "step", precision: "precision", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__number__container\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--decrement\"\r\n (click)=\"decrease()\"\r\n aria-label=\"Decrease value\"\r\n >\r\n \u2212\r\n </button>\r\n\r\n <input\r\n [id]=\"id\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.step]=\"inputStep\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--increment\"\r\n (click)=\"increase()\"\r\n aria-label=\"Increase value\"\r\n >\r\n +\r\n </button>\r\n </div>\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input[type=number]{-moz-appearance:textfield;appearance:none}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__wrapper:before,:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;width:0;height:.125rem;transition:width .3s ease,left .3s ease,right .3s ease}:host .frg-input__wrapper:before{left:-50%;background:var(--frg-input-accent);z-index:1}:host .frg-input__wrapper:after{right:-50%;z-index:2}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-error:after,:host .frg-input__wrapper.input-warning:after{width:100%}:host .frg-input__wrapper.input-error:after{background:#d66a6a;right:0}:host .frg-input__wrapper.input-warning:after{background:#eba566;right:0}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-warning:before{left:0}:host .frg-input__number__container{display:flex;align-items:center;box-sizing:border-box;position:relative;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);width:100%;max-width:100%;overflow:hidden}:host .frg-input__number__container input[type=number]{flex:1 1 auto;min-width:0;height:100%;border:none;margin:0;padding:.25rem .5rem;text-align:center;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;color:#5e5f62;outline:none}:host .frg-input__number__container input[type=number]:disabled{background:#bfbfbf;color:#b9babc;cursor:not-allowed}:host .frg-input__number__arrow{flex:0 0 auto;height:100%;margin:0;border:none;background:transparent;cursor:pointer;font-size:1.4rem;color:#5e5f62;-webkit-user-select:none;user-select:none}:host .frg-input__number__arrow:disabled{opacity:.45;cursor:not-allowed}:host .frg-input__number__arrow:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3710
4217
|
}
|
|
3711
4218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
3712
4219
|
type: Component,
|
|
3713
|
-
args: [{ selector: 'frg-input-number', imports: [InputRequiredLabelPipe, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
4220
|
+
args: [{ selector: 'frg-input-number', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__number__container\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--decrement\"\r\n (click)=\"decrease()\"\r\n aria-label=\"Decrease value\"\r\n >\r\n \u2212\r\n </button>\r\n\r\n <input\r\n [id]=\"id\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.step]=\"inputStep\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--increment\"\r\n (click)=\"increase()\"\r\n aria-label=\"Increase value\"\r\n >\r\n +\r\n </button>\r\n </div>\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input[type=number]{-moz-appearance:textfield;appearance:none}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__wrapper:before,:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;width:0;height:.125rem;transition:width .3s ease,left .3s ease,right .3s ease}:host .frg-input__wrapper:before{left:-50%;background:var(--frg-input-accent);z-index:1}:host .frg-input__wrapper:after{right:-50%;z-index:2}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-error:after,:host .frg-input__wrapper.input-warning:after{width:100%}:host .frg-input__wrapper.input-error:after{background:#d66a6a;right:0}:host .frg-input__wrapper.input-warning:after{background:#eba566;right:0}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-warning:before{left:0}:host .frg-input__number__container{display:flex;align-items:center;box-sizing:border-box;position:relative;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);width:100%;max-width:100%;overflow:hidden}:host .frg-input__number__container input[type=number]{flex:1 1 auto;min-width:0;height:100%;border:none;margin:0;padding:.25rem .5rem;text-align:center;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;color:#5e5f62;outline:none}:host .frg-input__number__container input[type=number]:disabled{background:#bfbfbf;color:#b9babc;cursor:not-allowed}:host .frg-input__number__arrow{flex:0 0 auto;height:100%;margin:0;border:none;background:transparent;cursor:pointer;font-size:1.4rem;color:#5e5f62;-webkit-user-select:none;user-select:none}:host .frg-input__number__arrow:disabled{opacity:.45;cursor:not-allowed}:host .frg-input__number__arrow:focus{outline:none}\n"] }]
|
|
3714
4221
|
}], propDecorators: { label: [{
|
|
3715
4222
|
type: Input
|
|
3716
4223
|
}], placeholder: [{
|
|
@@ -3721,6 +4228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
3721
4228
|
type: Input
|
|
3722
4229
|
}], errorMessages: [{
|
|
3723
4230
|
type: Input
|
|
4231
|
+
}], styleType: [{
|
|
4232
|
+
type: Input
|
|
3724
4233
|
}], type: [{
|
|
3725
4234
|
type: Input
|
|
3726
4235
|
}], min: [{
|
|
@@ -4475,6 +4984,10 @@ class InputDateComponent extends InputBase {
|
|
|
4475
4984
|
* @inheritdoc
|
|
4476
4985
|
*/
|
|
4477
4986
|
this.errorMessages = {};
|
|
4987
|
+
/**
|
|
4988
|
+
* Accent color style for border/focus.
|
|
4989
|
+
*/
|
|
4990
|
+
this.styleType = 'primary';
|
|
4478
4991
|
/**
|
|
4479
4992
|
* The type of the input element.
|
|
4480
4993
|
* Can be 'text', 'password', 'email', 'tel', etc.
|
|
@@ -4749,11 +5262,11 @@ class InputDateComponent extends InputBase {
|
|
|
4749
5262
|
delete this.warnings[key];
|
|
4750
5263
|
}
|
|
4751
5264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateComponent, isStandalone: true, selector: "frg-input-date", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", minDate: "minDate", maxDate: "maxDate", format: "format", validatorStrictMode: "validatorStrictMode" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
5265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateComponent, isStandalone: true, selector: "frg-input-date", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", minDate: "minDate", maxDate: "maxDate", format: "format", validatorStrictMode: "validatorStrictMode" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\">\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <button class=\"far fa-calendar frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleCalendar()\"\r\n ></button>\r\n </div>\r\n @if(showCalendar$ | async){\r\n <frg-input-calendar\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\">\r\n </frg-input-calendar>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input__wrapper{display:inline-block;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__calendar-button{border:none;background:transparent}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}\n"], dependencies: [{ kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: InputCalendarComponent, selector: "frg-input-calendar", inputs: ["minDate", "maxDate", "selectedValue"], outputs: ["selectDate", "handleMaxDate", "handleMinDate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
4753
5266
|
}
|
|
4754
5267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
4755
5268
|
type: Component,
|
|
4756
|
-
args: [{ selector: 'frg-input-date', imports: [InputValidationComponent, InputRequiredLabelPipe, InputCalendarComponent, AsyncPipe], template: "<div class=\"frg-input__wrapper\"\
|
|
5269
|
+
args: [{ selector: 'frg-input-date', imports: [InputValidationComponent, InputRequiredLabelPipe, InputCalendarComponent, AsyncPipe, NgClass], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\">\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <button class=\"far fa-calendar frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleCalendar()\"\r\n ></button>\r\n </div>\r\n @if(showCalendar$ | async){\r\n <frg-input-calendar\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\">\r\n </frg-input-calendar>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input__wrapper{display:inline-block;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__calendar-button{border:none;background:transparent}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}\n"] }]
|
|
4757
5270
|
}], propDecorators: { onDocumentClick: [{
|
|
4758
5271
|
type: HostListener,
|
|
4759
5272
|
args: ['document:click', ['$event']]
|
|
@@ -4767,6 +5280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
4767
5280
|
type: Input
|
|
4768
5281
|
}], errorMessages: [{
|
|
4769
5282
|
type: Input
|
|
5283
|
+
}], styleType: [{
|
|
5284
|
+
type: Input
|
|
4770
5285
|
}], type: [{
|
|
4771
5286
|
type: Input
|
|
4772
5287
|
}], minDate: [{
|
|
@@ -4835,6 +5350,10 @@ class InputTimeComponent extends InputBase {
|
|
|
4835
5350
|
* @inheritdoc
|
|
4836
5351
|
*/
|
|
4837
5352
|
this.errorMessages = {};
|
|
5353
|
+
/**
|
|
5354
|
+
* Accent color style for border/focus.
|
|
5355
|
+
*/
|
|
5356
|
+
this.styleType = 'primary';
|
|
4838
5357
|
/**
|
|
4839
5358
|
* The type of the input element.
|
|
4840
5359
|
* Can be 'text', 'password', 'email', 'tel', etc.
|
|
@@ -5427,11 +5946,11 @@ class InputTimeComponent extends InputBase {
|
|
|
5427
5946
|
delete this.warnings[key];
|
|
5428
5947
|
}
|
|
5429
5948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTimeComponent, isStandalone: true, selector: "frg-input-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", minTime: "minTime", maxTime: "maxTime", format: "format", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
5949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTimeComponent, isStandalone: true, selector: "frg-input-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", minTime: "minTime", maxTime: "maxTime", format: "format", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id + '-full'\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n @if(format.includes('HH') || format.includes('hh')) {\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'hour', min:minHour, max:maxHour, placeholder: format.includes('HH') ? 'HH' : 'hh'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('mm')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'minute', min:minMinute, max:maxMinute, placeholder:'mm'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('ss')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'second', min:minSecond, max:maxSecond, placeholder:'ss'}\"></ng-container>\r\n }\r\n\r\n @if(format.includes('a')) {\r\n <div class=\"frg-input__time__container frg-input__time__meridiem\">\r\n <input\r\n [id]=\"id + '-meridiem'\"\r\n [attr.data-partialTime]=\"'meridiem'\"\r\n type=\"checkbox\"\r\n tabindex=\"0\"\r\n role=\"switch\"\r\n [checked]=\"formatTime(value, 'meridiem') === 'PM'\"\r\n aria-checked=\"{{ formatTime(value, 'meridiem') === 'PM' }}\"\r\n placeholder=\"AM/PM\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (change)=\"onInput($event)\"\r\n (keydown.enter)=\"onKeydown($event)\"\r\n />\r\n </div>\r\n <span class=\"focus-line\"></span>\r\n\r\n }\r\n\r\n <input type=\"text\" [id]=\"id + '-full'\" [value]=\"value\" hidden />\r\n </div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\r\n\r\n<ng-template #timeControl let-partial=\"partial\" let-min=\"min\" let-max=\"max\" let-placeholder=\"placeholder\">\r\n <div class=\"frg-input__time__container\" [ngClass]=\"'frg-input__time__' + partial\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--increment\"\r\n (click)=\"increase(partial)\"\r\n aria-label=\"Increase value\"\r\n >\r\n <span class=\"fas fa-chevron-up\"></span>\r\n </button>\r\n <input\r\n [id]=\"id + '-' + partial\"\r\n [attr.data-partialTime]=\"partial\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatTime(value, partial) !== placeholder ? formatTime(value, partial) : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <span class=\"focus-line\"></span>\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--decrement\"\r\n (click)=\"decrease(partial)\"\r\n aria-label=\"Decrease value\"\r\n >\r\n <span class=\"fas fa-chevron-down\"></span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .2)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .2)}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;display:block;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__field{display:inline-flex;justify-content:center;align-items:center}:host .frg-input__field input[type=number],:host .frg-input__field input[type=number]:focus,:host .frg-input__field input[type=number]:focus-visible{border:none;outline:none}:host .frg-input__field input[type=number]{background:transparent;text-align:center;padding:.5rem 0;letter-spacing:.1rem;font-size:1rem;font-weight:600;color:#737579;display:block}:host .frg-input__field .partial-label{display:block;font-size:.75rem;text-transform:capitalize;width:100%;text-align:center;color:#737579}:host .frg-input__field .colon-seprator{display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}:host .frg-input__time__container{display:flex;flex-direction:column;align-items:center}:host .frg-input__time__container .focus-line{display:block;width:50%;margin:0 auto;height:2px;background-color:var(--frg-input-accent);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease,background-color .2s ease}:host .frg-input__time__container:focus-within .focus-line{transform:scaleX(1)}.frg-input__wrapper.input-error :host .frg-input__time__container .focus-line{background-color:#d66a6a;transform:scaleX(1)}.frg-input__wrapper.input-warning :host .frg-input__time__container .focus-line{background-color:#eba566;transform:scaleX(1)}:host .frg-input__time__meridiem{position:relative;width:3.5rem;height:1.5rem}:host .frg-input__time__meridiem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:100%;height:100%;border-radius:.25rem;background-color:#e6e6e6;cursor:pointer;position:relative;overflow:hidden;transition:background-color .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:focus{outline:none}:host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-offset:.25rem;outline:2px solid #5e5f62;box-shadow:0 0 0 2px var(--frg-input-accent-focus)}.frg-input__wrapper.input-error :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#d66a6a;box-shadow:0 0 0 2px #d66a6a33}.frg-input__wrapper.input-warning :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#eba566;box-shadow:0 0 0 2px #eba56633}:host .frg-input__time__meridiem input[type=checkbox]:before,:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"AM\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;font-weight:600;color:#5e5f62;transition:transform .25s ease,opacity .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"PM\";opacity:0;transform:translate(-50%,150%);color:#fdfdfd}:host .frg-input__time__meridiem input[type=checkbox]:checked{background-color:var(--frg-input-accent)}:host .frg-input__time__meridiem input[type=checkbox]:checked:before{transform:translate(-50%,-150%);opacity:0}:host .frg-input__time__meridiem input[type=checkbox]:checked:after{transform:translate(-50%,-50%);opacity:1}:host .frg-input__time__arrow{background:transparent;color:#5e5f62;border:none;display:block;width:100%;padding:0 .5rem;cursor:pointer}\n"], dependencies: [{ kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
5431
5950
|
}
|
|
5432
5951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTimeComponent, decorators: [{
|
|
5433
5952
|
type: Component,
|
|
5434
|
-
args: [{ selector: 'frg-input-time', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass, NgTemplateOutlet], template: "<div class=\"frg-input__wrapper\"\
|
|
5953
|
+
args: [{ selector: 'frg-input-time', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass, NgTemplateOutlet], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id + '-full'\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n @if(format.includes('HH') || format.includes('hh')) {\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'hour', min:minHour, max:maxHour, placeholder: format.includes('HH') ? 'HH' : 'hh'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('mm')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'minute', min:minMinute, max:maxMinute, placeholder:'mm'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('ss')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'second', min:minSecond, max:maxSecond, placeholder:'ss'}\"></ng-container>\r\n }\r\n\r\n @if(format.includes('a')) {\r\n <div class=\"frg-input__time__container frg-input__time__meridiem\">\r\n <input\r\n [id]=\"id + '-meridiem'\"\r\n [attr.data-partialTime]=\"'meridiem'\"\r\n type=\"checkbox\"\r\n tabindex=\"0\"\r\n role=\"switch\"\r\n [checked]=\"formatTime(value, 'meridiem') === 'PM'\"\r\n aria-checked=\"{{ formatTime(value, 'meridiem') === 'PM' }}\"\r\n placeholder=\"AM/PM\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (change)=\"onInput($event)\"\r\n (keydown.enter)=\"onKeydown($event)\"\r\n />\r\n </div>\r\n <span class=\"focus-line\"></span>\r\n\r\n }\r\n\r\n <input type=\"text\" [id]=\"id + '-full'\" [value]=\"value\" hidden />\r\n </div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\r\n\r\n<ng-template #timeControl let-partial=\"partial\" let-min=\"min\" let-max=\"max\" let-placeholder=\"placeholder\">\r\n <div class=\"frg-input__time__container\" [ngClass]=\"'frg-input__time__' + partial\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--increment\"\r\n (click)=\"increase(partial)\"\r\n aria-label=\"Increase value\"\r\n >\r\n <span class=\"fas fa-chevron-up\"></span>\r\n </button>\r\n <input\r\n [id]=\"id + '-' + partial\"\r\n [attr.data-partialTime]=\"partial\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatTime(value, partial) !== placeholder ? formatTime(value, partial) : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <span class=\"focus-line\"></span>\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--decrement\"\r\n (click)=\"decrease(partial)\"\r\n aria-label=\"Decrease value\"\r\n >\r\n <span class=\"fas fa-chevron-down\"></span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .2)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .2)}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;display:block;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__field{display:inline-flex;justify-content:center;align-items:center}:host .frg-input__field input[type=number],:host .frg-input__field input[type=number]:focus,:host .frg-input__field input[type=number]:focus-visible{border:none;outline:none}:host .frg-input__field input[type=number]{background:transparent;text-align:center;padding:.5rem 0;letter-spacing:.1rem;font-size:1rem;font-weight:600;color:#737579;display:block}:host .frg-input__field .partial-label{display:block;font-size:.75rem;text-transform:capitalize;width:100%;text-align:center;color:#737579}:host .frg-input__field .colon-seprator{display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}:host .frg-input__time__container{display:flex;flex-direction:column;align-items:center}:host .frg-input__time__container .focus-line{display:block;width:50%;margin:0 auto;height:2px;background-color:var(--frg-input-accent);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease,background-color .2s ease}:host .frg-input__time__container:focus-within .focus-line{transform:scaleX(1)}.frg-input__wrapper.input-error :host .frg-input__time__container .focus-line{background-color:#d66a6a;transform:scaleX(1)}.frg-input__wrapper.input-warning :host .frg-input__time__container .focus-line{background-color:#eba566;transform:scaleX(1)}:host .frg-input__time__meridiem{position:relative;width:3.5rem;height:1.5rem}:host .frg-input__time__meridiem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:100%;height:100%;border-radius:.25rem;background-color:#e6e6e6;cursor:pointer;position:relative;overflow:hidden;transition:background-color .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:focus{outline:none}:host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-offset:.25rem;outline:2px solid #5e5f62;box-shadow:0 0 0 2px var(--frg-input-accent-focus)}.frg-input__wrapper.input-error :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#d66a6a;box-shadow:0 0 0 2px #d66a6a33}.frg-input__wrapper.input-warning :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#eba566;box-shadow:0 0 0 2px #eba56633}:host .frg-input__time__meridiem input[type=checkbox]:before,:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"AM\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;font-weight:600;color:#5e5f62;transition:transform .25s ease,opacity .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"PM\";opacity:0;transform:translate(-50%,150%);color:#fdfdfd}:host .frg-input__time__meridiem input[type=checkbox]:checked{background-color:var(--frg-input-accent)}:host .frg-input__time__meridiem input[type=checkbox]:checked:before{transform:translate(-50%,-150%);opacity:0}:host .frg-input__time__meridiem input[type=checkbox]:checked:after{transform:translate(-50%,-50%);opacity:1}:host .frg-input__time__arrow{background:transparent;color:#5e5f62;border:none;display:block;width:100%;padding:0 .5rem;cursor:pointer}\n"] }]
|
|
5435
5954
|
}], propDecorators: { label: [{
|
|
5436
5955
|
type: Input
|
|
5437
5956
|
}], placeholder: [{
|
|
@@ -5442,6 +5961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
5442
5961
|
type: Input
|
|
5443
5962
|
}], errorMessages: [{
|
|
5444
5963
|
type: Input
|
|
5964
|
+
}], styleType: [{
|
|
5965
|
+
type: Input
|
|
5445
5966
|
}], type: [{
|
|
5446
5967
|
type: Input
|
|
5447
5968
|
}], minTime: [{
|
|
@@ -5641,6 +6162,10 @@ class InputDateTimeComponent extends InputBase {
|
|
|
5641
6162
|
* @inheritdoc
|
|
5642
6163
|
*/
|
|
5643
6164
|
this.errorMessages = {};
|
|
6165
|
+
/**
|
|
6166
|
+
* Accent color style for border/focus.
|
|
6167
|
+
*/
|
|
6168
|
+
this.styleType = 'primary';
|
|
5644
6169
|
/**
|
|
5645
6170
|
* Minimum year selectable in the calendar
|
|
5646
6171
|
*/
|
|
@@ -5925,11 +6450,11 @@ class InputDateTimeComponent extends InputBase {
|
|
|
5925
6450
|
}
|
|
5926
6451
|
}
|
|
5927
6452
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5928
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateTimeComponent, isStandalone: true, selector: "frg-input-date-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", minDateTime: "minDateTime", maxDateTime: "maxDateTime", format: "format" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
6453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateTimeComponent, isStandalone: true, selector: "frg-input-date-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", minDateTime: "minDateTime", maxDateTime: "maxDateTime", format: "format" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <div class=\"frg-input__handle-buttons\">\r\n @if(value){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__clear-button\"\r\n aria-label=\"Clear input\"\r\n (click)=\"clearValue()\"\r\n >\r\n ×\r\n </button>\r\n \r\n }\r\n <button class=\"fa-regular fa-calendar-days frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleDateTimePicker()\"\r\n ></button>\r\n </div>\r\n </div>\r\n @if(showDateTimePicker$ | async){\r\n <div class=\"frg-input__date-time-picker\">\r\n <div class=\"frg-input__date-time-panel\">\r\n <frg-input-calendar\r\n [minDate]=\"minDateTime\"\r\n [maxDate]=\"maxDateTime\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\"\r\n >\r\n </frg-input-calendar>\r\n\r\n <frg-input-clock-picker\r\n [timeFormat]=\"timeFormat\"\r\n [selectedHour]=\"value ? value.getHours().toString() : null\"\r\n [selectedMinute]=\"value ? value.getMinutes().toString() : null\"\r\n [selectedMeridiem]=\"currentMeridiem\"\r\n (selectHour)=\"selectHour($event)\"\r\n (selectMinute)=\"selectMinute($event)\"\r\n (selectMeridiem)=\"selectMeridiem($event)\">\r\n </frg-input-clock-picker>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{display:inline-block;position:relative;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__clear-button{background:transparent;border:none;font-size:1.5rem;color:#5e5f62;line-height:0;font-weight:lighter}:host .frg-input__calendar-button{border:none;background:transparent;color:#5e5f62}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}:host .frg-input__date-time-picker{position:absolute;top:calc(100% + .5rem);left:0;z-index:5}:host .frg-input__date-time-panel{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:.5rem;background:#fdfdfd;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;flex-wrap:nowrap;justify-content:center}:host .frg-input__date-time-panel frg-input-calendar,:host .frg-input__date-time-panel frg-input-clock-picker{display:block;flex:0 0 auto;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputCalendarComponent, selector: "frg-input-calendar", inputs: ["minDate", "maxDate", "selectedValue"], outputs: ["selectDate", "handleMaxDate", "handleMinDate"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: InputClockPickerComponent, selector: "frg-input-clock-picker", inputs: ["selectedHour", "selectedMinute", "selectedMeridiem", "timeFormat"], outputs: ["selectHour", "selectMinute", "selectMeridiem", "closePicker"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
5929
6454
|
}
|
|
5930
6455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateTimeComponent, decorators: [{
|
|
5931
6456
|
type: Component,
|
|
5932
|
-
args: [{ selector: 'frg-input-date-time', imports: [InputRequiredLabelPipe, ReactiveFormsModule, AsyncPipe, InputCalendarComponent, InputValidationComponent, InputClockPickerComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
6457
|
+
args: [{ selector: 'frg-input-date-time', imports: [InputRequiredLabelPipe, ReactiveFormsModule, AsyncPipe, NgClass, InputCalendarComponent, InputValidationComponent, InputClockPickerComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <div class=\"frg-input__handle-buttons\">\r\n @if(value){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__clear-button\"\r\n aria-label=\"Clear input\"\r\n (click)=\"clearValue()\"\r\n >\r\n ×\r\n </button>\r\n \r\n }\r\n <button class=\"fa-regular fa-calendar-days frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleDateTimePicker()\"\r\n ></button>\r\n </div>\r\n </div>\r\n @if(showDateTimePicker$ | async){\r\n <div class=\"frg-input__date-time-picker\">\r\n <div class=\"frg-input__date-time-panel\">\r\n <frg-input-calendar\r\n [minDate]=\"minDateTime\"\r\n [maxDate]=\"maxDateTime\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\"\r\n >\r\n </frg-input-calendar>\r\n\r\n <frg-input-clock-picker\r\n [timeFormat]=\"timeFormat\"\r\n [selectedHour]=\"value ? value.getHours().toString() : null\"\r\n [selectedMinute]=\"value ? value.getMinutes().toString() : null\"\r\n [selectedMeridiem]=\"currentMeridiem\"\r\n (selectHour)=\"selectHour($event)\"\r\n (selectMinute)=\"selectMinute($event)\"\r\n (selectMeridiem)=\"selectMeridiem($event)\">\r\n </frg-input-clock-picker>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{display:inline-block;position:relative;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__clear-button{background:transparent;border:none;font-size:1.5rem;color:#5e5f62;line-height:0;font-weight:lighter}:host .frg-input__calendar-button{border:none;background:transparent;color:#5e5f62}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}:host .frg-input__date-time-picker{position:absolute;top:calc(100% + .5rem);left:0;z-index:5}:host .frg-input__date-time-panel{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:.5rem;background:#fdfdfd;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;flex-wrap:nowrap;justify-content:center}:host .frg-input__date-time-panel frg-input-calendar,:host .frg-input__date-time-panel frg-input-clock-picker{display:block;flex:0 0 auto;margin:0}\n"] }]
|
|
5933
6458
|
}], propDecorators: { onDocumentClick: [{
|
|
5934
6459
|
type: HostListener,
|
|
5935
6460
|
args: ['document:click', ['$event']]
|
|
@@ -5943,6 +6468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
5943
6468
|
type: Input
|
|
5944
6469
|
}], errorMessages: [{
|
|
5945
6470
|
type: Input
|
|
6471
|
+
}], styleType: [{
|
|
6472
|
+
type: Input
|
|
5946
6473
|
}], minDateTime: [{
|
|
5947
6474
|
type: Input
|
|
5948
6475
|
}], maxDateTime: [{
|
|
@@ -5978,6 +6505,10 @@ class InputToggleSwitchComponent extends InputBase {
|
|
|
5978
6505
|
* @inheritdoc
|
|
5979
6506
|
*/
|
|
5980
6507
|
this.showValidation = true;
|
|
6508
|
+
/**
|
|
6509
|
+
* Accent color style for checked/focus state.
|
|
6510
|
+
*/
|
|
6511
|
+
this.styleType = 'primary';
|
|
5981
6512
|
/**
|
|
5982
6513
|
* The toggle switch type
|
|
5983
6514
|
* @default 'square'
|
|
@@ -6047,11 +6578,11 @@ class InputToggleSwitchComponent extends InputBase {
|
|
|
6047
6578
|
return this.warningList.length > 0;
|
|
6048
6579
|
}
|
|
6049
6580
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputToggleSwitchComponent, isStandalone: true, selector: "frg-input-toggle-switch", inputs: { label: "label", required: "required", disabled: "disabled", errorMessages: "errorMessages", warningMessages: "warningMessages", showValidation: "showValidation", type: "type" }, usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \
|
|
6581
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputToggleSwitchComponent, isStandalone: true, selector: "frg-input-toggle-switch", inputs: { label: "label", required: "required", disabled: "disabled", errorMessages: "errorMessages", warningMessages: "warningMessages", showValidation: "showValidation", styleType: "styleType", type: "type" }, usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \n [class.frg-toggle-switch__wrapper--primary]=\"styleType === 'primary'\"\n [class.frg-toggle-switch__wrapper--secondary]=\"styleType === 'secondary'\"\n [class.frg-toggle-switch__wrapper--tertiary]=\"styleType === 'tertiary'\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"frg-toggle-switch\"\r\n [ngClass]=\"[\r\n 'frg-toggle-switch--' + type,\n 'frg-toggle-switch--tone-' + styleType,\n value ? 'frg-toggle-switch--on' : 'frg-toggle-switch--off',\n disabled ? 'disabled' : ''\n ]\"\n [aria-checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n (keydown)=\"onKeydown($event)\"\r\n >\r\n <span class=\"handle\">\r\n @if (disabled) {\r\n <span class=\"fas fa-ban\"></span>\r\n }\r\n </span>\r\n </button>\r\n \r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\n", styles: [":host label{display:flex;font-size:.75rem;color:#5e5f62}:host .input-error label{color:#d66a6a}:host .frg-toggle-switch__wrapper{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--primary{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--secondary{--frg-toggle-accent: #e6c57a;--frg-toggle-focus: rgba(230, 197, 122, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--tertiary{--frg-toggle-accent: #d97ebd;--frg-toggle-focus: rgba(217, 126, 189, .14)}:host .frg-toggle-switch{width:40px;height:20px;position:relative;display:inline-block;background:#e6e6e6;border-radius:.25rem;border:none;padding:0;box-shadow:inset 0 1px 2px #0000000f;box-sizing:content-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease,box-shadow .16s ease;vertical-align:middle;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .frg-toggle-switch:focus{outline:none}:host .frg-toggle-switch:focus-visible{box-shadow:0 0 0 4px var(--frg-toggle-focus)}:host .frg-toggle-switch.disabled{cursor:not-allowed;opacity:.65;pointer-events:none;background:#bfbfbf;border-color:#737579}:host .frg-toggle-switch--off{background:#e6e6e6}:host .frg-toggle-switch--on{background:var(--frg-toggle-accent)}:host .frg-toggle-switch .handle{width:16px;height:16px;background:#fdfdfd;border-radius:.25rem;position:absolute;top:2px;left:2px;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .12s ease;will-change:transform;display:block;font-weight:600;color:#5e5f62;text-transform:uppercase;font-size:.7rem}:host .frg-toggle-switch--circle{border-radius:20px}:host .frg-toggle-switch--circle .handle{border-radius:50%}:host .frg-toggle-switch.frg-toggle-switch--on .handle{transform:translate(20px)}:host .frg-toggle-switch:not(.disabled):hover .handle{box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a}:host .frg-toggle-switch:active .handle{transform:translate(0) scale(.98)}:host .frg-toggle-switch.frg-toggle-switch--on:active .handle{transform:translate(20px) scale(.98)}@media (prefers-reduced-motion: reduce){:host .frg-toggle-switch .handle,:host .frg-toggle-switch{transition:none!important}}\n"], dependencies: [{ kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
6051
6582
|
}
|
|
6052
6583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputToggleSwitchComponent, decorators: [{
|
|
6053
6584
|
type: Component,
|
|
6054
|
-
args: [{ selector: 'frg-input-toggle-switch', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass], template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \
|
|
6585
|
+
args: [{ selector: 'frg-input-toggle-switch', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass], template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \n [class.frg-toggle-switch__wrapper--primary]=\"styleType === 'primary'\"\n [class.frg-toggle-switch__wrapper--secondary]=\"styleType === 'secondary'\"\n [class.frg-toggle-switch__wrapper--tertiary]=\"styleType === 'tertiary'\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"frg-toggle-switch\"\r\n [ngClass]=\"[\r\n 'frg-toggle-switch--' + type,\n 'frg-toggle-switch--tone-' + styleType,\n value ? 'frg-toggle-switch--on' : 'frg-toggle-switch--off',\n disabled ? 'disabled' : ''\n ]\"\n [aria-checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n (keydown)=\"onKeydown($event)\"\r\n >\r\n <span class=\"handle\">\r\n @if (disabled) {\r\n <span class=\"fas fa-ban\"></span>\r\n }\r\n </span>\r\n </button>\r\n \r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\n", styles: [":host label{display:flex;font-size:.75rem;color:#5e5f62}:host .input-error label{color:#d66a6a}:host .frg-toggle-switch__wrapper{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--primary{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--secondary{--frg-toggle-accent: #e6c57a;--frg-toggle-focus: rgba(230, 197, 122, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--tertiary{--frg-toggle-accent: #d97ebd;--frg-toggle-focus: rgba(217, 126, 189, .14)}:host .frg-toggle-switch{width:40px;height:20px;position:relative;display:inline-block;background:#e6e6e6;border-radius:.25rem;border:none;padding:0;box-shadow:inset 0 1px 2px #0000000f;box-sizing:content-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease,box-shadow .16s ease;vertical-align:middle;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .frg-toggle-switch:focus{outline:none}:host .frg-toggle-switch:focus-visible{box-shadow:0 0 0 4px var(--frg-toggle-focus)}:host .frg-toggle-switch.disabled{cursor:not-allowed;opacity:.65;pointer-events:none;background:#bfbfbf;border-color:#737579}:host .frg-toggle-switch--off{background:#e6e6e6}:host .frg-toggle-switch--on{background:var(--frg-toggle-accent)}:host .frg-toggle-switch .handle{width:16px;height:16px;background:#fdfdfd;border-radius:.25rem;position:absolute;top:2px;left:2px;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .12s ease;will-change:transform;display:block;font-weight:600;color:#5e5f62;text-transform:uppercase;font-size:.7rem}:host .frg-toggle-switch--circle{border-radius:20px}:host .frg-toggle-switch--circle .handle{border-radius:50%}:host .frg-toggle-switch.frg-toggle-switch--on .handle{transform:translate(20px)}:host .frg-toggle-switch:not(.disabled):hover .handle{box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a}:host .frg-toggle-switch:active .handle{transform:translate(0) scale(.98)}:host .frg-toggle-switch.frg-toggle-switch--on:active .handle{transform:translate(20px) scale(.98)}@media (prefers-reduced-motion: reduce){:host .frg-toggle-switch .handle,:host .frg-toggle-switch{transition:none!important}}\n"] }]
|
|
6055
6586
|
}], propDecorators: { label: [{
|
|
6056
6587
|
type: Input
|
|
6057
6588
|
}], required: [{
|
|
@@ -6064,6 +6595,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
6064
6595
|
type: Input
|
|
6065
6596
|
}], showValidation: [{
|
|
6066
6597
|
type: Input
|
|
6598
|
+
}], styleType: [{
|
|
6599
|
+
type: Input
|
|
6067
6600
|
}], type: [{
|
|
6068
6601
|
type: Input
|
|
6069
6602
|
}] } });
|
|
@@ -6859,6 +7392,10 @@ class InputFileUploadComponent extends InputBase {
|
|
|
6859
7392
|
* @inheritdoc
|
|
6860
7393
|
*/
|
|
6861
7394
|
this.errorMessages = {};
|
|
7395
|
+
/**
|
|
7396
|
+
* Accent color style for border/focus.
|
|
7397
|
+
*/
|
|
7398
|
+
this.styleType = 'primary';
|
|
6862
7399
|
/**
|
|
6863
7400
|
* Accepted file types (e.g. ".pdf,.png" or "image/*").
|
|
6864
7401
|
*/
|
|
@@ -7137,11 +7674,11 @@ class InputFileUploadComponent extends InputBase {
|
|
|
7137
7674
|
});
|
|
7138
7675
|
}
|
|
7139
7676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputFileUploadComponent, isStandalone: true, selector: "frg-input-file-upload", inputs: { label: "label", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", accept: "accept", multiple: "multiple", maxFiles: "maxFiles", maxFileSize: "maxFileSize", maxTotalSize: "maxTotalSize", buttonLabel: "buttonLabel", noFileText: "noFileText", showClearButton: "showClearButton", showFileList: "showFileList", showFileSize: "showFileSize" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
7677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputFileUploadComponent, isStandalone: true, selector: "frg-input-file-upload", inputs: { label: "label", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", accept: "accept", multiple: "multiple", maxFiles: "maxFiles", maxFileSize: "maxFileSize", maxTotalSize: "maxTotalSize", buttonLabel: "buttonLabel", noFileText: "noFileText", showClearButton: "showClearButton", showFileList: "showFileList", showFileSize: "showFileSize" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__file\" [class.has-files]=\"hasFiles\" [class.is-dragover]=\"isDragOver\">\r\n <div class=\"frg-input__file-main\">\r\n <frg-button\n [styleType]=\"styleType\"\n [shape]=\"'pill'\"\n [size]=\"'small'\"\r\n [text]=\"buttonLabel\"\r\n [iconClass]=\"'fas fa-plus'\"\r\n [iconStyleType]=\"'light'\"\r\n [iconPosition]=\"'left'\"\r\n [disabled]=\"disabled\"\r\n (clickEvent)=\"triggerFileDialog()\"\r\n >\r\n </frg-button>\r\n\r\n <div class=\"frg-input__file-summary\">\r\n <span class=\"frg-input__file-summary-title\">{{ fileSummary }}</span>\r\n <span class=\"frg-input__file-summary-subtitle\">Drop or browse to upload</span>\r\n </div>\r\n </div>\r\n\r\n @if(showClearButton && hasFiles){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-clear\"\r\n [disabled]=\"disabled\"\r\n (click)=\"clearFiles()\"\r\n >\r\n Clear all\r\n </button>\r\n }\r\n </div>\r\n\r\n <input\r\n #fileInput\r\n [id]=\"id\"\r\n type=\"file\"\r\n class=\"frg-input__file-input\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.accept]=\"accept || null\"\r\n [attr.multiple]=\"multiple ? '' : null\"\r\n (change)=\"onFileChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n @if(showFileList && files.length){\r\n <div class=\"frg-input__file-list\">\r\n @for(file of files; track trackFile($index, file)){\r\n <div class=\"frg-input__file-chip\">\r\n <span class=\"frg-input__file-name\">{{ file.name }}</span>\r\n @if(showFileSize){\r\n <span class=\"frg-input__file-size\">{{ formatBytes(file.size) }}</span>\r\n }\r\n @if(multiple){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-remove\"\r\n [disabled]=\"disabled\"\r\n (click)=\"removeFile($index)\"\r\n aria-label=\"Remove file\"\r\n >\r\n x\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .16)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .16)}:host .frg-input__file{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .85rem;border:1px dashed rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;background:#fdfdfd;transition:border-color .2s ease,box-shadow .2s ease}:host .frg-input__file.has-files{border-style:solid;border-color:var(--frg-input-accent);box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file.is-dragover{border-color:var(--frg-input-accent);box-shadow:0 0 0 3px var(--frg-input-accent-focus)}:host .frg-input__file:hover{border-color:var(--frg-input-accent)}:host .frg-input__file-main{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}:host .frg-input frg-button .frg-btn{margin:0}:host .frg-input__file-summary{display:flex;flex-direction:column;gap:.15rem;min-width:0;font-size:.875rem;color:#5e5f62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-subtitle{font-size:.75rem;color:#737579}:host .frg-input__file-clear{border:1px solid #d66a6a;background:transparent;color:#d66a6a;font-size:.75rem;border-radius:999px;padding:.2rem .6rem;cursor:pointer}:host .frg-input__file-clear:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__file-input{position:absolute;inset:0;opacity:0;pointer-events:none}:host .frg-input__file-list{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.875rem;color:#5e5f62}:host .frg-input__file-chip{display:flex;align-items:center;gap:.35rem;background:#fdfdfd;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:999px;padding:.2rem .5rem;box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file-name{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-size{color:#737579;font-size:.75rem}:host .frg-input__file-remove{border:none;background:transparent;color:#d66a6a;font-size:.75rem;cursor:pointer}:host .frg-input__file-remove:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__wrapper.input-error .frg-input__file{border-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:0;width:0;height:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: ButtonComponent, selector: "frg-button", inputs: ["id", "class", "textClass", "iconClass", "iconStyleType", "iconPosition", "type", "size", "buttonRouterLink", "buttonRouterLinkActive", "disabled", "styleType", "shape", "text", "ariaLabel"], outputs: ["clickEvent"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
7141
7678
|
}
|
|
7142
7679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputFileUploadComponent, decorators: [{
|
|
7143
7680
|
type: Component,
|
|
7144
|
-
args: [{ selector: 'frg-input-file-upload', imports: [InputRequiredLabelPipe, InputValidationComponent, ButtonComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
7681
|
+
args: [{ selector: 'frg-input-file-upload', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent, ButtonComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__file\" [class.has-files]=\"hasFiles\" [class.is-dragover]=\"isDragOver\">\r\n <div class=\"frg-input__file-main\">\r\n <frg-button\n [styleType]=\"styleType\"\n [shape]=\"'pill'\"\n [size]=\"'small'\"\r\n [text]=\"buttonLabel\"\r\n [iconClass]=\"'fas fa-plus'\"\r\n [iconStyleType]=\"'light'\"\r\n [iconPosition]=\"'left'\"\r\n [disabled]=\"disabled\"\r\n (clickEvent)=\"triggerFileDialog()\"\r\n >\r\n </frg-button>\r\n\r\n <div class=\"frg-input__file-summary\">\r\n <span class=\"frg-input__file-summary-title\">{{ fileSummary }}</span>\r\n <span class=\"frg-input__file-summary-subtitle\">Drop or browse to upload</span>\r\n </div>\r\n </div>\r\n\r\n @if(showClearButton && hasFiles){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-clear\"\r\n [disabled]=\"disabled\"\r\n (click)=\"clearFiles()\"\r\n >\r\n Clear all\r\n </button>\r\n }\r\n </div>\r\n\r\n <input\r\n #fileInput\r\n [id]=\"id\"\r\n type=\"file\"\r\n class=\"frg-input__file-input\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.accept]=\"accept || null\"\r\n [attr.multiple]=\"multiple ? '' : null\"\r\n (change)=\"onFileChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n @if(showFileList && files.length){\r\n <div class=\"frg-input__file-list\">\r\n @for(file of files; track trackFile($index, file)){\r\n <div class=\"frg-input__file-chip\">\r\n <span class=\"frg-input__file-name\">{{ file.name }}</span>\r\n @if(showFileSize){\r\n <span class=\"frg-input__file-size\">{{ formatBytes(file.size) }}</span>\r\n }\r\n @if(multiple){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-remove\"\r\n [disabled]=\"disabled\"\r\n (click)=\"removeFile($index)\"\r\n aria-label=\"Remove file\"\r\n >\r\n x\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .16)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .16)}:host .frg-input__file{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .85rem;border:1px dashed rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;background:#fdfdfd;transition:border-color .2s ease,box-shadow .2s ease}:host .frg-input__file.has-files{border-style:solid;border-color:var(--frg-input-accent);box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file.is-dragover{border-color:var(--frg-input-accent);box-shadow:0 0 0 3px var(--frg-input-accent-focus)}:host .frg-input__file:hover{border-color:var(--frg-input-accent)}:host .frg-input__file-main{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}:host .frg-input frg-button .frg-btn{margin:0}:host .frg-input__file-summary{display:flex;flex-direction:column;gap:.15rem;min-width:0;font-size:.875rem;color:#5e5f62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-subtitle{font-size:.75rem;color:#737579}:host .frg-input__file-clear{border:1px solid #d66a6a;background:transparent;color:#d66a6a;font-size:.75rem;border-radius:999px;padding:.2rem .6rem;cursor:pointer}:host .frg-input__file-clear:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__file-input{position:absolute;inset:0;opacity:0;pointer-events:none}:host .frg-input__file-list{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.875rem;color:#5e5f62}:host .frg-input__file-chip{display:flex;align-items:center;gap:.35rem;background:#fdfdfd;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:999px;padding:.2rem .5rem;box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file-name{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-size{color:#737579;font-size:.75rem}:host .frg-input__file-remove{border:none;background:transparent;color:#d66a6a;font-size:.75rem;cursor:pointer}:host .frg-input__file-remove:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__wrapper.input-error .frg-input__file{border-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:0;width:0;height:0}\n"] }]
|
|
7145
7682
|
}], propDecorators: { label: [{
|
|
7146
7683
|
type: Input
|
|
7147
7684
|
}], required: [{
|
|
@@ -7150,6 +7687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
7150
7687
|
type: Input
|
|
7151
7688
|
}], errorMessages: [{
|
|
7152
7689
|
type: Input
|
|
7690
|
+
}], styleType: [{
|
|
7691
|
+
type: Input
|
|
7153
7692
|
}], accept: [{
|
|
7154
7693
|
type: Input
|
|
7155
7694
|
}], multiple: [{
|
|
@@ -10043,5 +10582,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
10043
10582
|
* Generated bundle index. Do not edit.
|
|
10044
10583
|
*/
|
|
10045
10584
|
|
|
10046
|
-
export { AccordionComponent, AnimateDirective, BlobMorphComponent, BreadcrumbComponent, ButtonComponent, CardComponent, ChipComponent, ChunkPipe, CodeBlockComponent, ComponentAnimateDirective, ContainerComponent, ContentBlurComponent, DEFAULT_CONFIG, DividerComponent, DynamicPipe, EnumDirectionSortTable, FieldArrayPositionPipe, FragmentsAnimateService, FragmentsPopoverDirective, FragmentsTooltipDirective, FrgBadgeDirective, GalaxyComponent, HoverAnimateDirective, InputCalendarComponent, InputCheckboxComponent, InputCheckboxGroupComponent, InputClockPickerComponent, InputDateComponent, InputDateTimeComponent, InputFileUploadComponent, InputNumberComponent, InputRadioGroupComponent, InputSliderComponent, InputTextComponent, InputTimeComponent, InputToggleSwitchComponent, InputValidationComponent, ModalComponent, MultiSelectComponent, NEBULA_DEFAULT_CONFIG, NebulaComponent, PillComponent, ProgressBarComponent, PulseLoaderComponent, SafeHtmlPipe, SanitizeHtmlPipe, SectionComponent, SelectionListComponent, SeparatorComponent, SideNavComponent, SkeletonLoaderComponent, SmallPaginationComponent, SnackbarComponent, SparkleSectionComponent, SpinnerComponent, StaggerAnimateDirective, StepperComponent, TableComponent, TabsComponent, TagComponent, TextAnimateDirective, TimelineAnimateDirective, TitleBarComponent, ToastComponent, ToastStackComponent, TypeOfArrayPipe, deepMerge, generateId, generateNumberId, generateUUID, generateUniqueId, getActivatedRouteChild, getTimestampISO, getTimestampMillis, isObjectEmpty, normalizeNumber, orderList, paginationList, sortTable };
|
|
10585
|
+
export { AccordionComponent, AnimateDirective, BlobMorphComponent, BreadcrumbComponent, ButtonComponent, CardComponent, ChipComponent, ChunkPipe, CodeBlockComponent, ComponentAnimateDirective, ContainerComponent, ContentBlurComponent, DEFAULT_CONFIG, DividerComponent, DynamicPipe, EnumDirectionSortTable, FieldArrayPositionPipe, FragmentsAnimateService, FragmentsPopoverDirective, FragmentsTooltipDirective, FrgBadgeDirective, GalaxyComponent, HoverAnimateDirective, InputCalendarComponent, InputCheckboxComponent, InputCheckboxGroupComponent, InputClockPickerComponent, InputDateComponent, InputDateTimeComponent, InputFileUploadComponent, InputNumberComponent, InputRadioGroupComponent, InputRichTextComponent, InputSliderComponent, InputTextComponent, InputTextareaComponent, InputTimeComponent, InputToggleSwitchComponent, InputValidationComponent, ModalComponent, MultiSelectComponent, NEBULA_DEFAULT_CONFIG, NebulaComponent, PillComponent, ProgressBarComponent, PulseLoaderComponent, SafeHtmlPipe, SanitizeHtmlPipe, SectionComponent, SelectionListComponent, SeparatorComponent, SideNavComponent, SkeletonLoaderComponent, SmallPaginationComponent, SnackbarComponent, SparkleSectionComponent, SpinnerComponent, StaggerAnimateDirective, StepperComponent, TableComponent, TabsComponent, TagComponent, TextAnimateDirective, TimelineAnimateDirective, TitleBarComponent, ToastComponent, ToastStackComponent, TypeOfArrayPipe, deepMerge, generateId, generateNumberId, generateUUID, generateUniqueId, getActivatedRouteChild, getTimestampISO, getTimestampMillis, isObjectEmpty, normalizeNumber, orderList, paginationList, sortTable };
|
|
10047
10586
|
//# sourceMappingURL=tacdaed-fragments.mjs.map
|