UNPKG

cocori-ng

Version:

Cocori-ng is an Angular full of great components & utilites based on Material

1 lines 359 kB
{"version":3,"file":"cocori-ng-src-feature-form.mjs","sources":["../../../projects/cocori-ng/src/feature-form/core/config/config.components.ts","../../../projects/cocori-ng/src/feature-form/core/config/config.events.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button/cocoring-button.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button/cocoring-button.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/button-link/cocoring-button-link.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button-link/cocoring-button-link.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/extend-inputs/extend-inputs.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/error-handler/input-error-handler/cocoring-input-error.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox-indeterminate/checkbox-indeterminate.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox-indeterminate/checkbox-indeterminate.component.html","../../../projects/cocori-ng/src/feature-form/shared/pipe/variable-html/cocoring-variable-html.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox/cocoring-checkbox.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox/cocoring-checkbox.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-icon/input-icon.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-icon/input-icon.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-date/cocoring-date.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-date/cocoring-date.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-email/cocoring-email.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-email/cocoring-email.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-number/cocoring-number.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-number/cocoring-number.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-password/cocoring-password.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-password/cocoring-password.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-select/cocoring-select.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-select/cocoring-select.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-slide-toggle/cocoring-slide-toggle.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-slide-toggle/cocoring-slide-toggle.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-text/cocoring-text.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-text/cocoring-text.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-textarea/cocoring-textarea.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-textarea/cocoring-textarea.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-viewer/cocoring-viewer.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-viewer/cocoring-viewer.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/index.ts","../../../projects/cocori-ng/src/feature-form/core/service/form-builder/form-builder.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/uploader/uploader.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/toast-message.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/datagrid/datagrid.service.ts","../../../projects/cocori-ng/src/feature-form/shared/component/modal/confirm-modal/cocoring-confirm-modal.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/modal/confirm-modal/cocoring-confirm-modal.component.html","../../../projects/cocori-ng/src/feature-form/core/service/confirm-modal.service.ts","../../../projects/cocori-ng/src/feature-form/core/service/flex-layout/flex-layout.service.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/color-picker/cocoring-colorpicker.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/color-picker/cocoring-colorpicker.module.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/default-image/cocoring-default-image.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/default-image/cocoring-default-image.module.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/previous-page/cocoring-previous-page.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/previous-page/cocoring-previous-page.module.ts","../../../projects/cocori-ng/src/feature-form/shared/directive/datagrid/cocoring-datagrid-group.directive.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/variable-html/cocoring-variable-html.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/file-size/cocoring-file-size.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/file-size/cocoring-file-size.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/pretty-print/cocoring-pretty-print.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/pretty-print/cocoring-pretty-print.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/sanitize-url/cocoring-sanitize-url.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/sanitize-url/cocoring-sanitize-url.module.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/truncate/cocoring-truncate.pipe.ts","../../../projects/cocori-ng/src/feature-form/shared/pipe/truncate/cocoring-truncate.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/error-handler/input-error-handler/cocoring-input-error.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/wysiwyg/cocoring-wysiwyg.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/wysiwyg/cocoring-wysiwyg.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/wysiwyg/cocoring-wysiwyg.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/toast-error-stacktrace/toast-error-stacktrace.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/toast-error-stacktrace/toast-error-stacktrace.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/toast-error-stacktrace/toast-error-stacktrace.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/modal/confirm-modal/cocoring-confirm-modal.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-buttons/cocoring-buttons-group.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-buttons/cocoring-buttons-group.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-buttons/cocoring-buttons-group.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-icon/input-icon.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox/cocoring-checkbox.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-checkbox-indeterminate/checkbox-indeterminate.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-date/cocoring-date.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-slide-toggle/cocoring-slide-toggle.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-email/cocoring-email.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-number/cocoring-number.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-password/cocoring-password.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-select/cocoring-select.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-text/cocoring-text.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-textarea/cocoring-textarea.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/inputs/input-viewer/cocoring-viewer.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-container/cocoring-form-container.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-container/cocoring-form-container.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/form/form-container/cocoring-form-container.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button/cocoring-button.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/button-link/cocoring-button-link.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-bottom-sheet/cocoring-uploader-bottom-sheet.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-bottom-sheet/cocoring-uploader-bottom-sheet.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-file-actions/cocoring-uploader-file-actions.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-file-actions/cocoring-uploader-file-actions.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-list-file/cocoring-uploader-list-file.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader-list-file/cocoring-uploader-list-file.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/uploader/cocoring-uploader.module.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-cell/cocoring-datagrid-cell.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-cell/cocoring-datagrid-cell.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-row/cocoring-datagrid-row.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-row/cocoring-datagrid-row.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/common-datagrid/sort-column-extend.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-head/cocoring-datagrid-head.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-head/cocoring-datagrid-head.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-column/cocoring-datagrid-filter-column.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-column/cocoring-datagrid-filter-column.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-modal.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-filter-modal/cocoring-datagrid-filter-modal.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-searchbar/cocoring-datagrid-searchbar.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-searchbar/cocoring-datagrid-searchbar.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-toolbar.component.ts","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid-toolbar/cocoring-datagrid-toolbar.component.html","../../../projects/cocori-ng/src/feature-form/shared/component/datagrid/cocoring-datagrid.module.ts","../../../projects/cocori-ng/src/feature-form/shared/index.ts","../../../projects/cocori-ng/src/feature-form/cocori-ng-src-feature-form.ts"],"sourcesContent":["\r\nexport const DefaultConfigComponent = {\r\n form: {\r\n keyId: \"formId\",\r\n appearance: 'outline',\r\n styleCompact: false\r\n },\r\n button: {\r\n text: \"Valider\"\r\n },\r\n date: {\r\n dateTimeSeparator: ' à '\r\n },\r\n upload: {\r\n chunkSize: 2 * 1048576\r\n },\r\n wysiwyg: {\r\n plugins: [\r\n 'quickbars',\r\n 'advlist',\r\n 'autolink',\r\n 'lists',\r\n 'link',\r\n 'image',\r\n 'media',\r\n 'imagetools',\r\n 'emoticons',\r\n 'preview',\r\n 'searchreplace',\r\n 'media',\r\n 'table',\r\n 'paste',\r\n 'code',\r\n 'help',\r\n ],\r\n toolbar: 'undo redo | bullist | imageoptions | quicklink | outdent | indent | emoticons',\r\n quickbarsInsert: 'bullist numlist | imageoptions media | quicklink | quicktable | emoticons'\r\n }\r\n}\r\n","export const ConfigEvents = {\r\n FORM_SUBMITTED: \"FORM_SUBMITTED\",\r\n CMS_RESPONSIVE_ORIENTATION_CHANGED: \"CMS_RESPONSIVE_ORIENTATION_CHANGED\",\r\n};\r\n","import { ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';\r\nimport { ButtonComponentInputs, ButtonIconPositon, LoadingService, TypeButtonEnum } from 'cocori-ng/src/feature-core';\r\nimport { Subject, takeUntil } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'cocoring-button',\r\n templateUrl: 'cocoring-button.component.html',\r\n styleUrls: ['./cocoring-button.component.scss']\r\n})\r\nexport class CocoringButtonComponent implements OnInit, OnDestroy {\r\n @Output() callback: EventEmitter<string> = new EventEmitter<string>();\r\n @Output() click: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n @Input() disabled: boolean = false;\r\n @Input() text: string;\r\n @Input() type: string = TypeButtonEnum.SUBMIT;\r\n @Input() class: string = 'primary';\r\n\r\n onClickSubmit: Function;\r\n isLoading: boolean = false;\r\n icon: string;\r\n iconPosition: ButtonIconPositon;\r\n\r\n private readonly destroy$ = new Subject();\r\n\r\n constructor(\r\n private loadingService: LoadingService,\r\n private cdr: ChangeDetectorRef,) {\r\n }\r\n\r\n @Input()\r\n set config(config: ButtonComponentInputs) {\r\n if (!config) return;\r\n\r\n this.text = config.text;\r\n this.icon = config.icon;\r\n this.class = config.className || this.class;\r\n this.iconPosition = config.iconPosition;\r\n this.type = config.type;\r\n this.onClickSubmit = config.onClickSubmit;\r\n }\r\n\r\n ngOnInit() {\r\n this.loadingService.subject.pipe(\r\n takeUntil(this.destroy$)\r\n ).subscribe((isLoading: boolean) => {\r\n this.isLoading = isLoading\r\n this.cdr.detectChanges()\r\n })\r\n\r\n this.callback.emit(this.text);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this.destroy$.next(undefined);\r\n this.destroy$.complete();\r\n }\r\n\r\n onClick() {\r\n if (this.type === TypeButtonEnum.SUBMIT && this.onClickSubmit) {\r\n this.onClickSubmit()\r\n } else if (this.type === TypeButtonEnum.BUTTON && this.onClickSubmit) {\r\n this.click.emit()\r\n }\r\n }\r\n}\r\n","<button class=\"btn\" mat-raised-button [ngClass]=\"class\" [class.spinner]=\"isLoading\" type=\"{{type}}\"\r\n [disabled]=\"isLoading || disabled\" (click)=\"onClick()\">\r\n <mat-icon *ngIf=\"icon && iconPosition === 'start' \">{{icon}}</mat-icon>\r\n {{text}}\r\n <ng-content></ng-content>\r\n <mat-icon *ngIf=\"icon && iconPosition === 'end'\">{{icon}}</mat-icon>\r\n</button>","import { Component, Input, OnDestroy, OnInit } from '@angular/core';\r\nimport { ButtonComponentInputs, TypeButtonEnum } from 'cocori-ng/src/feature-core';\r\n\r\n@Component({\r\n selector: 'cocoring-button-link',\r\n templateUrl: 'cocoring-button-link.component.html',\r\n styleUrls: ['./cocoring-button-link.component.scss']\r\n})\r\nexport class CocoringButtonLinkComponent implements OnInit, OnDestroy {\r\n public btnConfig: ButtonComponentInputs\r\n public url: string = '/bo/home'\r\n public openNewTab: boolean = false\r\n\r\n /** Mettre les bons Inputs de base comme ceux utilisé dans le projet atlantX */\r\n\r\n constructor() { }\r\n\r\n @Input()\r\n set config(config: ButtonComponentInputs) {\r\n if (!config) return;\r\n\r\n config.type = TypeButtonEnum.BUTTON;\r\n\r\n this.url = config.url\r\n this.openNewTab = config.openNewTab || false\r\n this.btnConfig = config\r\n }\r\n\r\n ngOnInit() { }\r\n\r\n ngOnDestroy(): void { }\r\n}\r\n","<a [routerLink]=\"url ? url : null\" target=\"{{openNewTab ? '_blank' : '_self'}}\">\r\n <cocoring-button [config]=\"btnConfig\"></cocoring-button>\r\n</a>","import { Component, EventEmitter, Injector, Input, OnDestroy, Output } from '@angular/core';\r\nimport { UntypedFormArray, UntypedFormControl, UntypedFormGroup, ValidatorFn } from '@angular/forms';\r\nimport {\r\n ConfigInputComponent,\r\n DataSourceInput,\r\n DatasourceService,\r\n HttpService,\r\n InputFieldAppearance,\r\n OutputCallback,\r\n ValidatorsService,\r\n} from 'cocori-ng/src/feature-core';\r\nimport { Observable, Subject, takeUntil } from 'rxjs';\r\n\r\n@Component({\r\n selector: 'extend-inputs',\r\n template: '',\r\n host: { 'class': 'input-form' }\r\n})\r\n\r\nexport abstract class ExtendInputsComponent implements OnDestroy {\r\n @Input() formGroup: UntypedFormGroup\r\n @Input() nameControl: string\r\n @Input() nameLabel: string\r\n @Input() color: string = 'primary' /** à factoriser dans le helper pour la construction de form */\r\n\r\n /** méthode appelée lorsque que le contrôle a été ajouté au formulaire avec en paramètre le nom du contrôle créé */\r\n @Output() callback: EventEmitter<string> = new EventEmitter<string>();\r\n\r\n public readonly destroy$ = new Subject();\r\n\r\n dataSource$: Observable<any>;\r\n dataSourceNameProperty: string\r\n inRelationWith: string;\r\n validators: ValidatorFn[];\r\n appearance: InputFieldAppearance;\r\n httpService: HttpService;\r\n datasourceService: DatasourceService;\r\n styleCompact: boolean;\r\n maxlength: number;\r\n icon: string;\r\n callbackComponent: OutputCallback;\r\n\r\n constructor(injector: Injector) {\r\n this.httpService = injector.get(HttpService);\r\n this.datasourceService = injector.get(DatasourceService);\r\n }\r\n\r\n ngOnDestroy() {\r\n this.destroy$.next(undefined);\r\n this.destroy$.complete();\r\n }\r\n\r\n configInput(config: ConfigInputComponent) {\r\n this.nameLabel = config.nameLabel;\r\n this.nameControl = config.nameControl;\r\n this.formGroup = config.formGroup;\r\n this.styleCompact = config.styleCompact;\r\n this.maxlength = config.maxlength;\r\n this.icon = config.icon;\r\n this.appearance = config.appearance;\r\n this.dataSource$ = this.loadDataSource(config.dataSource)\r\n this.inRelationWith = config.inRelationWith\r\n this.validators = config.validators\r\n this.callbackComponent = config.callbackComponent\r\n\r\n this.nameLabel += this.isControlRequired() ? ' *' : ''\r\n }\r\n\r\n emitEvent() {\r\n if (!this.formGroup || !this.nameControl) {\r\n throw new Error(`Données formulaire manquantes, formGroup : ${this.formGroup} - nameControl : ${this.nameControl}`);\r\n }\r\n\r\n this.inRelatioNWith()\r\n\r\n if (this.callbackComponent) {\r\n this.callbackComponent.callback(this.nameControl)\r\n } else {\r\n this.callback.emit(this.nameControl);\r\n }\r\n }\r\n\r\n clearValue(event?: any) {\r\n this.formGroup.get(this.nameControl).reset()\r\n this.formGroup.get(this.nameControl).markAsUntouched()\r\n\r\n if(event) event.stopPropagation();\r\n }\r\n\r\n addControlForm() {\r\n if (this.controlAlreadyAdded()) return;\r\n\r\n this.formGroup.addControl(this.nameControl, new UntypedFormControl(null, this.validators))\r\n\r\n this.emitEvent()\r\n }\r\n\r\n addArrayForm() {\r\n if (this.controlAlreadyAdded()) return;\r\n\r\n this.formGroup.addControl(this.nameControl, new UntypedFormArray([], this.validators))\r\n\r\n this.emitEvent()\r\n }\r\n\r\n private controlAlreadyAdded(): boolean {\r\n return this.formGroup.contains(this.nameControl)\r\n }\r\n\r\n loadDataSource(configDataSource: DataSourceInput): Observable<any> {\r\n if (!configDataSource) return;\r\n\r\n this.dataSourceNameProperty = configDataSource.dataSourceNameProperty || 'name'\r\n\r\n return this.datasourceService.loadDataSource(configDataSource)\r\n }\r\n\r\n private inRelatioNWith() {\r\n if (this.inRelationWith && typeof this.inRelationWith !== 'undefined') {\r\n\r\n console.log(\"inRelationWith>>\", this.inRelationWith, this.formGroup)\r\n\r\n this.formGroup.get(this.inRelationWith).valueChanges.pipe(\r\n takeUntil(this.destroy$),\r\n ).subscribe((parentValue) => {\r\n console.log(\"Parent Value \", parentValue);\r\n })\r\n }\r\n }\r\n\r\n private isControlRequired(): boolean {\r\n if (!this.validators) return;\r\n\r\n const d = this.validators.find((validatorFn: Function) => validatorFn.name === ValidatorsService.require.name)\r\n\r\n return typeof d === 'undefined' ? false : true\r\n }\r\n}\r\n","import { Component, Input, OnDestroy, OnInit } from '@angular/core';\r\nimport { UntypedFormGroup, ValidationErrors } from '@angular/forms';\r\nimport { BroadcastEventService, ValidatorsService, ValidtionError } from 'cocori-ng/src/feature-core';\r\nimport { merge, Observable } from 'rxjs';\r\nimport { filter, map } from 'rxjs/operators';\r\n\r\nimport { DefaultConfigComponent } from '../../../../core/config/config.components';\r\nimport { ConfigEvents } from '../../../../core/config/config.events';\r\n\r\n@Component({\r\n selector: '[error-handler]',\r\n template: `\r\n <ng-container *ngIf=\"(errorMessage$ | async) as errorMessage\">\r\n <mat-error>{{errorMessage}}</mat-error>\r\n </ng-container>\r\n `,\r\n styleUrls: ['./cocoring-input-error.component.scss']\r\n})\r\n\r\nexport class CocoringInputErrorComponent implements OnInit, OnDestroy {\r\n @Input() form: UntypedFormGroup;\r\n @Input() controlName: string;\r\n\r\n private formId: string;\r\n\r\n errorMessage$: any;\r\n\r\n constructor(\r\n private broadcastEventService: BroadcastEventService,\r\n private validatorsService: ValidatorsService) { }\r\n\r\n ngOnInit() {\r\n\r\n if (!this.form.get(DefaultConfigComponent.form.keyId)) return;\r\n\r\n this.formId = this.form.get(DefaultConfigComponent.form.keyId).value as string\r\n\r\n const onSubmitObs: Observable<unknown> = this.broadcastEventService.listen([ConfigEvents.FORM_SUBMITTED, this.formId])\r\n const valueChangesObs: Observable<unknown> = this.form.get(this.controlName).valueChanges\r\n\r\n this.mergeObservables(onSubmitObs, valueChangesObs)\r\n }\r\n\r\n ngOnDestroy() { }\r\n\r\n private mergeObservables(onSubmitObs: Observable<unknown>, valueChangesObs: Observable<unknown>) {\r\n this.errorMessage$ = merge(\r\n onSubmitObs,\r\n valueChangesObs\r\n )\r\n .pipe(\r\n filter((value: any) => this.form.get(this.controlName).errors !== null),\r\n map((value: any) => this.form.get(this.controlName).errors),\r\n map((formError: ValidationErrors) => {\r\n const errorKey: string = Object.keys(formError)[0]\r\n\r\n /** pour déclencher l'erreur angular material */\r\n this.form.get(this.controlName).markAsTouched()\r\n\r\n return this.validatorsService.getValidationErrorMessage(<ValidtionError>{ key: errorKey, value: formError[errorKey] })\r\n })\r\n )\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input } from '@angular/core';\r\nimport { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';\r\nimport { ConfigInputComponent } from 'cocori-ng/src/feature-core';\r\nimport { takeUntil } from 'rxjs';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-checkbox-indeterminate',\r\n templateUrl: 'checkbox-indeterminate.component.html',\r\n styleUrls: ['./checkbox-indeterminate.component.scss'],\r\n})\r\n\r\nexport class CocoringCheckboxIndeterminateComponent extends ExtendInputsComponent {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n\r\n this.dataSource$.pipe(\r\n takeUntil(this.destroy$),\r\n ).subscribe((datasource: any[]) => {\r\n this.addNestedForm(datasource)\r\n })\r\n }\r\n\r\n nestedNameForm: string = 'nestedValues'\r\n someComplete: boolean = false;\r\n\r\n constructor(\r\n private fb: UntypedFormBuilder,\r\n private cdr: ChangeDetectorRef,\r\n injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n private addNestedForm(datasource: any[]) {\r\n\r\n if (!datasource.length) return;\r\n\r\n const nestedFrom = this.fb.group({});\r\n\r\n datasource.forEach((datas: any) => {\r\n nestedFrom.addControl(datas.id, new UntypedFormControl(false))\r\n })\r\n\r\n this.formGroup.addControl(this.nestedNameForm, nestedFrom)\r\n\r\n this.formChangeEvent()\r\n\r\n this.nestedFormChangeEvent()\r\n }\r\n\r\n private formChangeEvent() {\r\n this.formGroup.get(this.nameControl).valueChanges.pipe(\r\n takeUntil(this.destroy$),\r\n ).subscribe((value: boolean) => {\r\n this.setValueControls(value)\r\n })\r\n }\r\n\r\n private setValueControls(value: boolean) {\r\n Object.keys(this.nestedForm['controls']).forEach(key => {\r\n this.nestedForm['controls'][key].setValue(value, { emitEvent: false })\r\n });\r\n }\r\n\r\n private nestedFormChangeEvent() {\r\n // const nestedFormPropertiesLength: number = this.formHelperService.countControlsForm(this.nestedForm)\r\n const nestedFormPropertiesLength: number = 3\r\n\r\n this.nestedForm.valueChanges.pipe(\r\n takeUntil(this.destroy$),\r\n ).subscribe((values) => {\r\n const completed: any[] = Object.entries(values).filter(([key, value]) => <boolean>value === true)\r\n\r\n if (completed.length === nestedFormPropertiesLength) {\r\n this.formGroup.get(this.nameControl).setValue(true, { emitEvent: false })\r\n\r\n setTimeout(() => {\r\n this.someComplete = false\r\n this.cdr.detectChanges()\r\n });\r\n } else if (completed.length > 0 && completed.length < nestedFormPropertiesLength) {\r\n this.formGroup.get(this.nameControl).setValue(false, { emitEvent: false })\r\n\r\n setTimeout(() => {\r\n this.someComplete = true\r\n this.cdr.detectChanges()\r\n });\r\n } else {\r\n this.someComplete = false\r\n this.formGroup.get(this.nameControl).setValue(false, { emitEvent: false })\r\n }\r\n })\r\n }\r\n\r\n private get nestedForm(): UntypedFormGroup {\r\n return <UntypedFormGroup>this.formGroup.get(this.nestedNameForm)\r\n }\r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <mat-checkbox\r\n class=\"optionSelectAll\"\r\n [formControlName]=\"nameControl\" \r\n [indeterminate]=\"someComplete\"\r\n color=\"primary\"\r\n (click)=\"$event.stopPropagation()\">\r\n {{nameLabel}}\r\n </mat-checkbox>\r\n\r\n <ng-container [formGroupName]=\"nestedNameForm\">\r\n <mat-checkbox *ngFor=\"let item of (dataSource$ | async)\" \r\n [formControlName]=\"item.id\"\r\n color=\"primary\">\r\n {{item[dataSourceNameProperty]}}\r\n </mat-checkbox>\r\n </ng-container>\r\n\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"nameControl\"></mat-error>\r\n</ng-container>","import { Pipe, PipeTransform } from '@angular/core';\r\nimport { DomSanitizer, SafeHtml } from '@angular/platform-browser';\r\n\r\n@Pipe({\r\n name: 'variableHtml',\r\n pure: false\r\n})\r\nexport class CocoringVariableHtmlPipe implements PipeTransform {\r\n constructor(private sanitizer: DomSanitizer) {\r\n }\r\n transform(texteHtml: string): SafeHtml {\r\n if (!texteHtml) return ''\r\n\r\n return this.sanitizer.bypassSecurityTrustHtml(texteHtml);\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, Component, Injector, Input, OnInit } from '@angular/core';\r\nimport { ConfigInputComponent } from 'cocori-ng/src/feature-core';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-checkbox',\r\n templateUrl: 'cocoring-checkbox.component.html',\r\n})\r\n\r\nexport class CocoringCheckboxComponent extends ExtendInputsComponent implements OnInit {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n }\r\n\r\n constructor(injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() { }\r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <mat-checkbox (click)=\"$event.stopPropagation()\" [formControlName]=\"nameControl\" [color]=\"color\">\r\n <div [innerHtml]=\"nameLabel | variableHtml\"></div>\r\n </mat-checkbox>\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"nameControl\"></mat-error>\r\n</ng-container>","import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';\r\n\r\n\r\n@Component({\r\n selector: 'input-icon',\r\n templateUrl: './input-icon.component.html',\r\n styleUrls: ['./input-icon.component.scss']\r\n})\r\nexport class InputIconComponent implements OnInit {\r\n @Input() icon: string\r\n @Output() clickEvent: EventEmitter<boolean> = new EventEmitter();\r\n\r\n constructor() { }\r\n\r\n ngOnInit(): void {\r\n }\r\n\r\n emitClickEvent() {\r\n this.clickEvent.emit(true);\r\n }\r\n\r\n}\r\n","<button type=\"button\" tabindex=\"-1\" *ngIf=\"icon\" (click)=\"emitClickEvent()\" mat-icon-button aria-label=\"Icone dans le champ de saisi\">\r\n <mat-icon>\r\n {{icon}}\r\n </mat-icon>\r\n</button>","import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Injector, Input, OnInit } from '@angular/core';\r\nimport { UntypedFormControl } from '@angular/forms';\r\nimport { MAT_DATE_LOCALE } from '@angular/material/core';\r\nimport { ConfigInputComponent, HelperService, ValidatorsService } from 'cocori-ng/src/feature-core';\r\nimport { DateTime } from 'luxon';\r\nimport { takeUntil } from 'rxjs';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-date',\r\n templateUrl: 'cocoring-date.component.html',\r\n styleUrls: ['./cocoring-date.component.scss'],\r\n})\r\n\r\nexport class CocoringDateComponent extends ExtendInputsComponent implements OnInit {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n\r\n config.validators.push(ValidatorsService.dateValidator)\r\n\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n\r\n this.maskInputControlName = `m${this.nameControl}`\r\n\r\n /** le masque de saisie ne fonctionne pas avec le composant de material datepicker */\r\n this.addDateMaskControl()\r\n\r\n this.valueChangeEvent()\r\n\r\n }\r\n\r\n // dateMask: any = { guide: false, showMask : false, mask: [/\\d/, /\\d/, '/', /\\d/, /\\d/, '/', /\\d/, /\\d/, /\\d/, /\\d/], placeholderChar: '\\u2000' };\r\n\r\n maskInputControlName: string = null\r\n\r\n constructor(\r\n @Inject(MAT_DATE_LOCALE) public locale: string,\r\n private cdr: ChangeDetectorRef,\r\n injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() { }\r\n\r\n /** Value from datepicker changed event */\r\n valueChangeEvent() {\r\n this.formGroup.get(this.nameControl).valueChanges.pipe(\r\n takeUntil(this.destroy$)\r\n ).subscribe((val) => {\r\n let d = null;\r\n\r\n if (!val) return;\r\n\r\n if (typeof val.getMonth === 'function' || typeof val === 'string') {\r\n d = DateTime.fromJSDate(new Date(val)).setLocale(this.locale).toLocaleString() // sous la forme de 21/12/2021\r\n } else if ((<Object>val).hasOwnProperty(\"isLuxonDateTime\")) {\r\n d = DateTime.fromISO(val).setLocale(this.locale).toLocaleString() // sous la forme de 21/12/2021\r\n }\r\n\r\n if (d) {\r\n this.formGroup.get(this.maskInputControlName).setValue(HelperService.replaceAll(d, '/', ''))\r\n\r\n setTimeout(() => { // bogue dans le rendu sinon...\r\n this.cdr.detectChanges()\r\n });\r\n }\r\n })\r\n }\r\n\r\n private maskInputChangeEvent() {\r\n this.formGroup.get(this.maskInputControlName).valueChanges.pipe(\r\n takeUntil(this.destroy$)\r\n ).subscribe((dateInput: string) => {\r\n this.dispatchValueInput(dateInput)\r\n })\r\n }\r\n\r\n private dispatchValueInput(dateInput: string) {\r\n if (dateInput && dateInput.length === 8) {\r\n const day = dateInput.substring(0, 2)\r\n const month = dateInput.substring(2, 4)\r\n const year = dateInput.substring(4)\r\n\r\n const dateFormated: DateTime = DateTime.fromISO(year + month + day)\r\n\r\n if (dateFormated.isValid) {\r\n this.formGroup.get(this.nameControl).setValue(DateTime.fromISO(year + month + day), { emitEvent: false })\r\n } else this.clearDateMaskValue()\r\n } else {\r\n this.clearValue()\r\n }\r\n }\r\n\r\n onBlur() {\r\n const dateInput: string = this.formGroup.get(this.maskInputControlName).value\r\n\r\n if (!dateInput || dateInput.length !== 8) {\r\n this.clearDateMaskValue()\r\n }\r\n }\r\n\r\n private addDateMaskControl() {\r\n this.formGroup.addControl(this.maskInputControlName, new UntypedFormControl(null, this.validators))\r\n\r\n this.maskInputChangeEvent()\r\n\r\n this.emitEvent()\r\n }\r\n\r\n clearDateMaskValue(event?: any) {\r\n this.formGroup.get(this.maskInputControlName).reset()\r\n this.formGroup.get(this.maskInputControlName).markAsUntouched()\r\n\r\n this.clearValue(event)\r\n\r\n if (event) event.stopPropagation();\r\n }\r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"appearance\" [ngClass]=\"{'mat-form-compact': styleCompact}\">\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <!-- <input matInput [matDatepicker]=\"picker\" [formControlName]=\"nameControl\"> -->\r\n <input [attr.data-cy]=\"nameControl\" matInput type=\"text\" mask=\"d0/M0/0000\" [leadZeroDateTime]=\"true\" [formControlName]=\"maskInputControlName\" (blur)=\"onBlur()\"/>\r\n <input [matDatepicker]=\"picker\" [formControlName]=\"nameControl\">\r\n <div matSuffix style=\"display:flex\">\r\n <mat-datepicker-toggle tabindex=\"-1\" matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <input-icon icon=\"close\" *ngIf=\"formGroup.get(maskInputControlName).value\" (click)=\"clearDateMaskValue($event)\"></input-icon>\r\n </div>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"maskInputControlName\"></mat-error>\r\n </mat-form-field>\r\n</ng-container>","import { ChangeDetectionStrategy, Component, Injector, Input, OnInit } from '@angular/core';\r\nimport { ConfigInputComponent, ValidatorsService } from 'cocori-ng/src/feature-core';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-email',\r\n templateUrl: 'cocoring-email.component.html',\r\n})\r\n\r\nexport class CocoringEmailComponent extends ExtendInputsComponent implements OnInit {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n\r\n config.validators.push(ValidatorsService.emailValidator)\r\n\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n }\r\n\r\n constructor(injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() { }\r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"appearance\" [ngClass]=\"{'mat-form-compact': styleCompact}\">\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <div matPrefix>\r\n <input-icon [icon]=\"icon\"></input-icon>\r\n </div>\r\n <input [attr.data-cy]=\"nameControl\" type=\"email\" matInput [formControlName]=\"nameControl\" />\r\n <div matSuffix style=\"display:flex\">\r\n <input-icon icon=\"close\" *ngIf=\"formGroup.get(nameControl).value\" (click)=\"clearValue($event)\"></input-icon>\r\n </div>\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"nameControl\"></mat-error>\r\n </mat-form-field>\r\n</ng-container>","import { ChangeDetectionStrategy, Component, Injector, Input, OnDestroy, OnInit } from '@angular/core';\r\nimport { ConfigInputComponent } from 'cocori-ng/src/feature-core';\r\nimport { filter, takeUntil } from 'rxjs/operators';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-number',\r\n templateUrl: 'cocoring-number.component.html',\r\n})\r\n\r\nexport class CocoringNumberComponent extends ExtendInputsComponent implements OnInit, OnDestroy {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n }\r\n\r\n constructor(injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() {\r\n this.formGroup.get(this.nameControl).valueChanges.pipe(\r\n takeUntil(this.destroy$),\r\n filter(value => this.maxlength && String(value).length > this.maxlength && value > 0),\r\n ).subscribe((value) => {\r\n this.formGroup.get(this.nameControl).setValue(String(value).slice(0, this.maxlength), { emitEvent: false })\r\n })\r\n }\r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"appearance\" [ngClass]=\"{'mat-form-compact': styleCompact}\">\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <div matPrefix>\r\n <input-icon [icon]=\"icon\"></input-icon>\r\n </div>\r\n <input [attr.data-cy]=\"nameControl\" type=\"number\" matInput [formControlName]=\"nameControl\" [maxlength]=\"maxlength\" />\r\n <div matSuffix style=\"display:flex\">\r\n <input-icon icon=\"close\" *ngIf=\"formGroup.get(nameControl).value\" (click)=\"clearValue($event)\"></input-icon>\r\n </div>\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"nameControl\"></mat-error>\r\n </mat-form-field>\r\n</ng-container>","import { ChangeDetectionStrategy, Component, Injector, Input, OnInit } from '@angular/core';\r\nimport { ConfigInputComponent } from 'cocori-ng/src/feature-core';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-password',\r\n templateUrl: 'cocoring-password.component.html',\r\n})\r\n\r\nexport class CocoringPasswordComponent extends ExtendInputsComponent implements OnInit {\r\n\r\n type: string = \"password\"\r\n revealPasswordStatus: boolean = false;\r\n\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n }\r\n\r\n constructor(injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() { }\r\n\r\n toggleRevealPassword() {\r\n this.revealPasswordStatus = !this.revealPasswordStatus;\r\n\r\n this.type = this.revealPasswordStatus ? 'text' : 'password'\r\n } \r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"appearance\" [ngClass]=\"{'mat-form-compact': styleCompact}\">\r\n <mat-label>{{nameLabel}}</mat-label>\r\n \r\n <div matPrefix>\r\n <input-icon [icon]=\"icon\"></input-icon>\r\n </div>\r\n\r\n <input [attr.data-cy]=\"nameControl\" matInput [type]=\"type\" [formControlName]=\"nameControl\" />\r\n\r\n <div matSuffix style=\"display:flex\">\r\n <button type=\"button\" tabindex=\"-1\" class=\"suffix-icon\" (click)=\"toggleRevealPassword()\" mat-icon-button\r\n aria-label=\"Révéler / cacher le mot de passe\">\r\n <mat-icon>\r\n <ng-container *ngIf=\"!revealPasswordStatus\">visibility</ng-container>\r\n <ng-container *ngIf=\"revealPasswordStatus\">visibility_off</ng-container>\r\n </mat-icon>\r\n </button>\r\n\r\n <input-icon icon=\"close\" *ngIf=\"formGroup.get(nameControl).value\" (click)=\"clearValue($event)\">\r\n </input-icon>\r\n </div>\r\n\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"nameControl\"></mat-error>\r\n </mat-form-field>\r\n</ng-container>","import { ChangeDetectionStrategy, Component, Injector, Input, OnInit } from '@angular/core';\r\nimport { ConfigInputComponent } from 'cocori-ng/src/feature-core';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-select',\r\n templateUrl: 'cocoring-select.component.html',\r\n styleUrls: ['./cocoring-select.component.scss']\r\n})\r\n\r\nexport class CocoringSelectComponent extends ExtendInputsComponent implements OnInit {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n this.configInput(config)\r\n\r\n this.addControlForm()\r\n }\r\n\r\n constructor(injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() { }\r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"appearance\" [ngClass]=\"{'mat-form-compact': styleCompact}\">\r\n <div matPrefix>\r\n <input-icon [icon]=\"icon\"></input-icon>\r\n </div>\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <mat-select [attr.data-cy]=\"nameControl\" [formControlName]=\"nameControl\">\r\n <mat-option *ngFor=\"let item of (dataSource$ | async)\" [value]=\"item.id\">\r\n {{item[dataSourceNameProperty]}}\r\n </mat-option>\r\n </mat-select>\r\n <div matSuffix style=\"display:flex\">\r\n <input-icon icon=\"close\" *ngIf=\"formGroup.get(nameControl).value\" (click)=\"clearValue($event)\"></input-icon>\r\n </div>\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"nameControl\"></mat-error>\r\n </mat-form-field>\r\n</ng-container>","import { ChangeDetectionStrategy, Component, Injector, Input, OnInit } from '@angular/core';\r\nimport { ConfigInputComponent } from 'cocori-ng/src/feature-core';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-slide-toggle',\r\n templateUrl: 'cocoring-slide-toggle.component.html',\r\n styleUrls: ['./cocoring-slide-toggle.component.scss']\r\n})\r\n\r\nexport class CocoringSlideToggleComponent extends ExtendInputsComponent implements OnInit {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n }\r\n\r\n constructor(injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() { }\r\n}\r\n","<ng-container [formGroup]=\"formGroup\">\r\n <div class=\"slide-toggle-frm\">\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <mat-slide-toggle [attr.data-cy]=\"nameControl\" [formControlName]=\"nameControl\"></mat-slide-toggle>\r\n </div>\r\n <mat-error error-handler [form]=\"formGroup\" [controlName]=\"nameControl\"></mat-error>\r\n</ng-container>","import { ChangeDetectionStrategy, Component, Injector, Input, OnInit } from '@angular/core';\r\nimport { ConfigInputComponent } from 'cocori-ng/src/feature-core';\r\n\r\nimport { ExtendInputsComponent } from '../extend-inputs/extend-inputs.component';\r\n\r\n@Component({\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n selector: 'cocoring-text',\r\n templateUrl: 'cocoring-text.component.html',\r\n})\r\n\r\nexport class CocoringTextComponent extends ExtendInputsComponent implements OnInit {\r\n @Input()\r\n set config(config: ConfigInputComponent) {\r\n this.configInput(config)\r\n\r\n this.addControlForm();\r\n }\r\n\r\n constructor(injector: Injector) {\r\n super(injector);\r\n }\r\n\r\n ngOnInit() { }\r\n}\r\n","<!-- utilier ngTemplateOutlet ex: https://blog.bitsrc.io/component-reusability-techniques-with-angular-727a6c603ad2 -->\r\n\r\n<!-- <input-container-ng [form]=\"formGroup\" [controlName]=\"nameControl\">\r\n <ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field>\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"nameControl\" />\r\n </mat-form-field>\r\n </ng-container>\r\n</input-container-ng> -->\r\n\r\n<!-- <input-container-ng [templateRef]=\"nestedComponentRef\" [form]=\"formGroup\" [controlName]=\"nameControl\">\r\n</input-container-ng>\r\n\r\n<ng-template #nestedComponentRef>\r\n <ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field>\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <input type=\"text\" matInput [formControlName]=\"nameControl\" />\r\n </mat-form-field>\r\n </ng-container>\r\n</ng-template> -->\r\n\r\n<ng-container [formGroup]=\"formGroup\">\r\n <mat-form-field [appearance]=\"appearance\" [ngClass]=\"{'mat-form-compact': styleCompact}\">\r\n <mat-label>{{nameLabel}}</mat-label>\r\n <div matPrefix>\r\n <input-icon [icon]=\"icon\"></input-icon>\r\n </div>\r\n <input type=\"text\" [attr.data-cy]=\"nameControl\" matInput [formControlName]=\"nameControl\" [maxlength]=\"maxlength\" />\r\n <div matSuffix style=\"display:flex\">\r\n <input-icon icon=\"close\" *ngIf=\"formGroup.get(nameControl).value\" (click)=\"clearValue($event)\">\r\n </input-icon>\r\n