@tacdaed/fragments 1.0.0-beta.19 → 1.0.0-beta.20

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.
Files changed (3) hide show
  1. package/fesm2022/tacdaed-fragments.mjs +18 -18
  2. package/index.d.ts +1 -1
  3. package/package.json +1 -1
package/fesm2022/tacdaed-fragments.mjs CHANGED
@@ -3377,11 +3377,11 @@ class InputTextComponent extends InputBase {
3377
3377
  this.control?.updateValueAndValidity();
3378
3378
  }
3379
3379
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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" }] }); }
3381
3381
  }
3382
3382
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextComponent, decorators: [{
3383
3383
  type: Component,
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"] }]
3384
+ args: [{ selector: 'frg-input-text', imports: [InputRequiredLabelPipe, NgTemplateOutlet, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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"] }]
3385
3385
  }], propDecorators: { label: [{
3386
3386
  type: Input
3387
3387
  }], placeholder: [{
@@ -3482,11 +3482,11 @@ class InputTextareaComponent extends InputBase {
3482
3482
  // Handled by Angular binding
3483
3483
  }
3484
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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <textarea\r\n [id]=\"id\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [rows]=\"rows\"\r\n [style.resize]=\"resize\"\r\n [attr.maxlength]=\"maxLength\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\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}", 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
3486
  }
3487
3487
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextareaComponent, decorators: [{
3488
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"] }]
3489
+ args: [{ selector: 'frg-input-textarea', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <textarea\r\n [id]=\"id\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [rows]=\"rows\"\r\n [style.resize]=\"resize\"\r\n [attr.maxlength]=\"maxLength\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n ></textarea>\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}", 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
3490
  }], propDecorators: { label: [{
3491
3491
  type: Input
3492
3492
  }], placeholder: [{
@@ -3871,11 +3871,11 @@ class InputRichTextComponent extends InputBase {
3871
3871
  return rawHtml;
3872
3872
  }
3873
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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary',\r\n 'frg-input__wrapper--no-toolbar': !showToolbar\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n @if(showToolbar) {\r\n <div class=\"frg-input__toolbar\">\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('bold')\"\r\n [class.is-active]=\"isCommandActive('bold')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Bold\"\r\n title=\"Bold\"\r\n >\r\n <strong>B</strong>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('italic')\"\r\n [class.is-active]=\"isCommandActive('italic')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Italic\"\r\n title=\"Italic\"\r\n >\r\n <em>I</em>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('underline')\"\r\n [class.is-active]=\"isCommandActive('underline')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Underline\"\r\n title=\"Underline\"\r\n >\r\n <u>U</u>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('insertUnorderedList')\"\r\n [class.is-active]=\"isCommandActive('insertUnorderedList')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Bullet list\"\r\n title=\"Bullet list\"\r\n >\r\n <span class=\"fas fa-list-ul\" aria-hidden=\"true\"></span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('insertOrderedList')\"\r\n [class.is-active]=\"isCommandActive('insertOrderedList')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Numbered list\"\r\n title=\"Numbered list\"\r\n >\r\n <span class=\"fas fa-list-ol\" aria-hidden=\"true\"></span>\r\n </button>\r\n <label class=\"frg-input__toolbar-color\" [attr.for]=\"id + '-text-color'\" aria-label=\"Text color\">\r\n <input\r\n [id]=\"id + '-text-color'\"\r\n type=\"color\"\r\n [disabled]=\"disabled\"\r\n value=\"#1f2937\"\r\n (input)=\"setTextColor($event)\"\r\n />\r\n </label>\r\n </div>\r\n }\r\n\r\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n <div\r\n #editor\r\n class=\"frg-input__editor\"\r\n [id]=\"id\"\r\n [attr.data-placeholder]=\"placeholder\"\r\n [style.min-height]=\"minHeight\"\r\n [attr.contenteditable]=\"disabled ? 'false' : 'true'\"\r\n [attr.aria-disabled]=\"disabled\"\r\n [attr.aria-label]=\"label || placeholder || 'Rich text editor'\"\r\n (input)=\"onInput()\"\r\n (keydown)=\"onEditorKeyDown($event)\"\r\n (keyup)=\"onEditorKeyUp()\"\r\n (mouseup)=\"onEditorSelectionChange()\"\r\n (focus)=\"onEditorSelectionChange()\"\r\n (blur)=\"onBlur()\"\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}\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
3875
  }
3876
3876
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputRichTextComponent, decorators: [{
3877
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"] }]
3878
+ args: [{ selector: 'frg-input-rich-text', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary',\r\n 'frg-input__wrapper--no-toolbar': !showToolbar\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n @if(showToolbar) {\r\n <div class=\"frg-input__toolbar\">\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('bold')\"\r\n [class.is-active]=\"isCommandActive('bold')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Bold\"\r\n title=\"Bold\"\r\n >\r\n <strong>B</strong>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('italic')\"\r\n [class.is-active]=\"isCommandActive('italic')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Italic\"\r\n title=\"Italic\"\r\n >\r\n <em>I</em>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('underline')\"\r\n [class.is-active]=\"isCommandActive('underline')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Underline\"\r\n title=\"Underline\"\r\n >\r\n <u>U</u>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('insertUnorderedList')\"\r\n [class.is-active]=\"isCommandActive('insertUnorderedList')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Bullet list\"\r\n title=\"Bullet list\"\r\n >\r\n <span class=\"fas fa-list-ul\" aria-hidden=\"true\"></span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n (mousedown)=\"preventToolbarMouseDown($event)\"\r\n (click)=\"execute('insertOrderedList')\"\r\n [class.is-active]=\"isCommandActive('insertOrderedList')\"\r\n [disabled]=\"disabled\"\r\n aria-label=\"Numbered list\"\r\n title=\"Numbered list\"\r\n >\r\n <span class=\"fas fa-list-ol\" aria-hidden=\"true\"></span>\r\n </button>\r\n <label class=\"frg-input__toolbar-color\" [attr.for]=\"id + '-text-color'\" aria-label=\"Text color\">\r\n <input\r\n [id]=\"id + '-text-color'\"\r\n type=\"color\"\r\n [disabled]=\"disabled\"\r\n value=\"#1f2937\"\r\n (input)=\"setTextColor($event)\"\r\n />\r\n </label>\r\n </div>\r\n }\r\n\r\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n <div\r\n #editor\r\n class=\"frg-input__editor\"\r\n [id]=\"id\"\r\n [attr.data-placeholder]=\"placeholder\"\r\n [style.min-height]=\"minHeight\"\r\n [attr.contenteditable]=\"disabled ? 'false' : 'true'\"\r\n [attr.aria-disabled]=\"disabled\"\r\n [attr.aria-label]=\"label || placeholder || 'Rich text editor'\"\r\n (input)=\"onInput()\"\r\n (keydown)=\"onEditorKeyDown($event)\"\r\n (keyup)=\"onEditorKeyUp()\"\r\n (mouseup)=\"onEditorSelectionChange()\"\r\n (focus)=\"onEditorSelectionChange()\"\r\n (blur)=\"onBlur()\"\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}\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
3879
  }], propDecorators: { editorRef: [{
3880
3880
  type: ViewChild,
3881
3881
  args: ['editor']
@@ -4213,11 +4213,11 @@ class InputNumberComponent extends InputBase {
4213
4213
  return num.toString().split('.')[1]?.length ?? 0;
4214
4214
  }
4215
4215
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\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__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}\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 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" }] }); }
4217
4217
  }
4218
4218
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputNumberComponent, decorators: [{
4219
4219
  type: Component,
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"] }]
4220
+ args: [{ selector: 'frg-input-number', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\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__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}\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 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"] }]
4221
4221
  }], propDecorators: { label: [{
4222
4222
  type: Input
4223
4223
  }], placeholder: [{
@@ -5262,11 +5262,11 @@ class InputDateComponent extends InputBase {
5262
5262
  delete this.warnings[key];
5263
5263
  }
5264
5264
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\">\r\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" }] }); }
5266
5266
  }
5267
5267
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateComponent, decorators: [{
5268
5268
  type: Component,
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"] }]
5269
+ args: [{ selector: 'frg-input-date', imports: [InputValidationComponent, InputRequiredLabelPipe, InputCalendarComponent, AsyncPipe, NgClass], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\">\r\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"] }]
5270
5270
  }], propDecorators: { onDocumentClick: [{
5271
5271
  type: HostListener,
5272
5272
  args: ['document:click', ['$event']]
@@ -5946,11 +5946,11 @@ class InputTimeComponent extends InputBase {
5946
5946
  delete this.warnings[key];
5947
5947
  }
5948
5948
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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" }] }); }
5950
5950
  }
5951
5951
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTimeComponent, decorators: [{
5952
5952
  type: Component,
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"] }]
5953
+ args: [{ selector: 'frg-input-time', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass, NgTemplateOutlet], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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"] }]
5954
5954
  }], propDecorators: { label: [{
5955
5955
  type: Input
5956
5956
  }], placeholder: [{
@@ -6450,11 +6450,11 @@ class InputDateTimeComponent extends InputBase {
6450
6450
  }
6451
6451
  }
6452
6452
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
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 &times;\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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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 &times;\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" }] }); }
6454
6454
  }
6455
6455
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateTimeComponent, decorators: [{
6456
6456
  type: Component,
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 &times;\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"] }]
6457
+ args: [{ selector: 'frg-input-date-time', imports: [InputRequiredLabelPipe, ReactiveFormsModule, AsyncPipe, NgClass, InputCalendarComponent, InputValidationComponent, InputClockPickerComponent], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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 &times;\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"] }]
6458
6458
  }], propDecorators: { onDocumentClick: [{
6459
6459
  type: HostListener,
6460
6460
  args: ['document:click', ['$event']]
@@ -6578,11 +6578,11 @@ class InputToggleSwitchComponent extends InputBase {
6578
6578
  return this.warningList.length > 0;
6579
6579
  }
6580
6580
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
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" }] }); }
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\" \r\n [class.frg-toggle-switch__wrapper--primary]=\"styleType === 'primary'\"\r\n [class.frg-toggle-switch__wrapper--secondary]=\"styleType === 'secondary'\"\r\n [class.frg-toggle-switch__wrapper--tertiary]=\"styleType === 'tertiary'\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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,\r\n 'frg-toggle-switch--tone-' + styleType,\r\n value ? 'frg-toggle-switch--on' : 'frg-toggle-switch--off',\r\n disabled ? 'disabled' : ''\r\n ]\"\r\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>\r\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" }] }); }
6582
6582
  }
6583
6583
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputToggleSwitchComponent, decorators: [{
6584
6584
  type: Component,
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"] }]
6585
+ args: [{ selector: 'frg-input-toggle-switch', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass], template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \r\n [class.frg-toggle-switch__wrapper--primary]=\"styleType === 'primary'\"\r\n [class.frg-toggle-switch__wrapper--secondary]=\"styleType === 'secondary'\"\r\n [class.frg-toggle-switch__wrapper--tertiary]=\"styleType === 'tertiary'\"\r\n [class.input-error]=\"hasError\"\r\n [class.input-warning]=\"hasWarning\"\r\n>\r\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,\r\n 'frg-toggle-switch--tone-' + styleType,\r\n value ? 'frg-toggle-switch--on' : 'frg-toggle-switch--off',\r\n disabled ? 'disabled' : ''\r\n ]\"\r\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>\r\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"] }]
6586
6586
  }], propDecorators: { label: [{
6587
6587
  type: Input
6588
6588
  }], required: [{
@@ -7674,11 +7674,11 @@ class InputFileUploadComponent extends InputBase {
7674
7674
  });
7675
7675
  }
7676
7676
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
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" }] }); }
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\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n (dragover)=\"onDragOver($event)\"\r\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\r\n [styleType]=\"styleType\"\r\n [shape]=\"'pill'\"\r\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" }] }); }
7678
7678
  }
7679
7679
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputFileUploadComponent, decorators: [{
7680
7680
  type: Component,
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"] }]
7681
+ args: [{ selector: 'frg-input-file-upload', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent, ButtonComponent], template: "<div class=\"frg-input__wrapper\"\r\n [ngClass]=\"{\r\n 'frg-input__wrapper--primary': styleType === 'primary',\r\n 'frg-input__wrapper--secondary': styleType === 'secondary',\r\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\r\n }\"\r\n [class.input-error]=\"hasError\"\r\n (dragover)=\"onDragOver($event)\"\r\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\r\n [styleType]=\"styleType\"\r\n [shape]=\"'pill'\"\r\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"] }]
7682
7682
  }], propDecorators: { label: [{
7683
7683
  type: Input
7684
7684
  }], required: [{
package/index.d.ts CHANGED
@@ -4616,4 +4616,4 @@ declare class TextAnimateDirective implements OnDestroy {
4616
4616
  }
4617
4617
 
4618
4618
  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 };
4619
- export type { AccordionItem, AccordionItemContext, AccordionToggleEvent, ArrayOneOrMore, Badge, BreadcrumbItem, Chip, CodeBlockBody, CodeBlockConfig, CodeBlockFooter, CodeBlockHeader, DateFormat, DateTimeFormat, DeepRequired, FragnimateBaseAnimation, FragnimateComponentParams, FragnimateHoverParams, FragnimateParams, FragnimateStaggerParams, FragnimateTextParams, FragnimateTimelineParams, GalaxyConfig, GenericFunction, IActionElement, IBaseAction, IConfigTable, IConfigTooltip, IConfigTooltipButtton, IConfigTooltipPopover, IEventAction, IFieldPipe, ILinkAction, IPaginationOutput, ISideNavConfig, ISideNavItem, ISideNavSection, ITBody, ITBodyAction, ITBodyCell, ITBodyCellIcon, ITBodyColumn, ITCaption, ITHead, ITHeadAction, ITHeadColumn, ITPagination, ITSort, ITTitleBar, ITTitleBarFilter, ITTitleBarSearch, ITableCellTemplateContext, ITooltipElement, ITooltipEventAction, ITooltipLinkAction, InputCheckboxGroupItem, InputRadioGroupItem, InputRichTextCommand, InputRichTextConfig, InputTextareaConfig, InputTextareaResize, ModalCloseEvent, NebulaAnimations, NebulaBlob, NebulaColors, NebulaConfig, NebulaCoreConfig, NgClassValue, Pill, SelectionListItem, SnackbarCloseEvent, Star, StatusIndicator, StepChangeEvent, StepItem, StepItemContext, StepValidationContext, StepValidationEvent, StepValidator, TAccordionSize, TAccordionStyle, TBasePosition, TBaseSideNavSize, TBaseSideNavStyle, TBaseSize, TBaseStatusIconPosition, TBaseStatusSize, TBaseStatusStyle, TBaseStyle, TBehaviourAction, TButtonIconPosition, TButtonShape, TButtonSize, TButtonStyle, TButtonType, TCardStyle, TChipIconPosition, TChipSize, TChipType, TContainerSize, TCustomNgClass, TDividerOrientation, TDividerSpacing, THLJSLanguage, TIconPosition, TInputType, TModalCloseReason, TModalSize, TNebulaBlendMode, TPillIconPosition, TPillSize, TPillType, TProgressBarAnimation, TProgressBarSize, TProgressBarType, TPulseLoaderSize, TPulseLoaderType, TSectionHeading, TSectionSpacing, TSeparatorSize, TSideNavLink, TSkeletonLoaderSize, TSkeletonLoaderType, TSnackbarCloseReason, TSnackbarPosition, TSnackbarSize, TSnackbarStyle, TSpinnerSize, TSpinnerType, TStepNavigationSource, TStepperMotion, TStepperOrientation, TTabSize, TTabStyle, TTagIconPosition, TTagSize, TTagType, TToastCloseReason, TToastPosition, TToastSize, TToastStyle, TabChangeEvent, TabItem, TabItemContext, Tag, TimeFormat, ToastCloseEvent, ToastStackCloseEvent, ToastStackItem, TooltipPosition, TypeForm, Without, XOR };
4619
+ export type { AccordionItem, AccordionItemContext, AccordionToggleEvent, ArrayOneOrMore, Badge, BreadcrumbItem, Chip, CodeBlockBody, CodeBlockConfig, CodeBlockFooter, CodeBlockHeader, DateFormat, DateTimeFormat, DeepRequired, FragnimateBaseAnimation, FragnimateComponentParams, FragnimateHoverParams, FragnimateParams, FragnimateStaggerParams, FragnimateTextParams, FragnimateTimelineParams, GalaxyConfig, GenericFunction, IActionElement, IBaseAction, IConfigTable, IConfigTooltip, IConfigTooltipButtton, IConfigTooltipPopover, IEventAction, IFieldPipe, ILinkAction, IPaginationOutput, ISideNavConfig, ISideNavItem, ISideNavSection, ITBody, ITBodyAction, ITBodyCell, ITBodyCellIcon, ITBodyColumn, ITCaption, ITHead, ITHeadAction, ITHeadColumn, ITPagination, ITSort, ITTitleBar, ITTitleBarFilter, ITTitleBarSearch, ITableCellTemplateContext, ITooltipElement, ITooltipEventAction, ITooltipLinkAction, InputBorderStyleType, InputCheckboxGroupItem, InputChoiceStyleType, InputDateType, InputNumberType, InputRadioGroupItem, InputRichTextCommand, InputRichTextConfig, InputSliderSize, InputTextType, InputTextareaConfig, InputTextareaResize, InputTimeMeridiem, InputTimePartial, InputTimeType, InputToggleSwitchType, ModalCloseEvent, NebulaAnimations, NebulaBlob, NebulaColors, NebulaConfig, NebulaCoreConfig, NgClassValue, Pill, SelectionListItem, SnackbarCloseEvent, Star, StatusIndicator, StepChangeEvent, StepItem, StepItemContext, StepValidationContext, StepValidationEvent, StepValidator, TAccordionSize, TAccordionStyle, TBasePosition, TBaseSideNavSize, TBaseSideNavStyle, TBaseSize, TBaseStatusIconPosition, TBaseStatusSize, TBaseStatusStyle, TBaseStyle, TBehaviourAction, TButtonIconPosition, TButtonShape, TButtonSize, TButtonStyle, TButtonType, TCardStyle, TChipIconPosition, TChipSize, TChipType, TContainerSize, TCustomNgClass, TDividerOrientation, TDividerSpacing, THLJSLanguage, TIconPosition, TInputType, TModalCloseReason, TModalSize, TNebulaBlendMode, TPillIconPosition, TPillSize, TPillType, TProgressBarAnimation, TProgressBarSize, TProgressBarType, TPulseLoaderSize, TPulseLoaderType, TSectionHeading, TSectionSpacing, TSeparatorSize, TSideNavLink, TSkeletonLoaderSize, TSkeletonLoaderType, TSnackbarCloseReason, TSnackbarPosition, TSnackbarSize, TSnackbarStyle, TSpinnerSize, TSpinnerType, TStepNavigationSource, TStepperMotion, TStepperOrientation, TTabSize, TTabStyle, TTagIconPosition, TTagSize, TTagType, TToastCloseReason, TToastPosition, TToastSize, TToastStyle, TabChangeEvent, TabItem, TabItemContext, Tag, TimeFormat, ToastCloseEvent, ToastStackCloseEvent, ToastStackItem, TooltipPosition, TypeForm, Without, XOR };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tacdaed/fragments",
3
- "version": "1.0.0-beta.19",
3
+ "version": "1.0.0-beta.20",
4
4
  "peerDependencies": {
5
5
  "@angular/common": "^20.2.0",
6
6
  "@angular/core": "^20.2.0",