@ng-formworks/material

Version:

Angular ng-formworks - JSON Schema Form builder using Angular Material UI

1 lines • 176 kB

Source Map (JSON)

{"version":3,"file":"ng-formworks-material.mjs","sources":["../../../../projects/ng-formworks-material/src/lib/material-design-cssframework.ts","../../../../projects/ng-formworks-material/src/lib/material-design-framework.component.ts","../../../../projects/ng-formworks-material/src/lib/material-design-framework.component.html","../../../../projects/ng-formworks-material/src/lib/widgets/flex-layout-root.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/flex-layout-section.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-add-reference.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-button.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-button-group.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-checkbox.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-checkboxes.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-chip-list.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-datepicker.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-file.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-input.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-number.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-tabs.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-one-of.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-radios.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-select.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-slider.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-stepper.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/material-textarea.component.ts","../../../../projects/ng-formworks-material/src/lib/widgets/public_api.ts","../../../../projects/ng-formworks-material/src/lib/material-design.framework.ts","../../../../projects/ng-formworks-material/src/lib/material-design-framework.module.ts","../../../../projects/ng-formworks-material/src/public_api.ts","../../../../projects/ng-formworks-material/src/ng-formworks-material.ts"],"sourcesContent":["\r\nexport const cssFrameworkCfgMaterialDesign:any={\r\n \"name\": \"material-design\",\r\n \"text\":\"Material Design\",\r\n \"scripts\": [],\r\n \"stylesheets\": [\r\n '//fonts.googleapis.com/icon?family=Material+Icons',\r\n '//fonts.googleapis.com/css?family=Roboto:300,400,500,700',\r\n ],\r\n \"widgetstyles\": {\r\n \"__themes__\": [\r\n {\"name\":\"material_default\",\"text\":\"Default Theme\"},\r\n {\"name\":\"azure-blue\",\"text\":\"Azure & Blue\"},\r\n {\"name\":\"rose-red\",\"text\":\"Rose & Red\"},\r\n {\"name\":\"cyan-orange\",\"text\":\"Cyan & Orange\"},\r\n {\"name\":\"magenta-violet\",\"text\":\"Magenta & Violet\"},\r\n {\"name\":\"indigo-pink\",\"text\":\"Indigo & Pink\"},\r\n {\"name\":\"purple-green\",\"text\":\"Purple & Green\"},\r\n {\"name\":\"deeppurple-amber\",\"text\":\"Deep Purple & Amber\"},\r\n {\"name\":\"pink-bluegrey\",\"text\":\"Pink & Blue-Grey\"},\r\n \r\n ]\r\n }\r\n}\r\n\r\n","import { ChangeDetectorRef, Component, OnChanges, OnDestroy, OnInit, input, inject } from '@angular/core';\r\nimport { FrameworkLibraryService, JsonSchemaFormService, isDefined } from '@ng-formworks/core';\r\nimport { CssframeworkService } from '@ng-formworks/cssframework';\r\nimport cloneDeep from 'lodash/cloneDeep';\r\nimport { Subscription } from 'rxjs';\r\nimport { cssFrameworkCfgMaterialDesign } from './material-design-cssframework';\r\n\r\n@Component({\n // tslint:disable-next-line:component-selector\n selector: 'material-design-framework',\n templateUrl: './material-design-framework.component.html',\n styleUrls: ['./material-design-framework.component.scss'],\n standalone: false\n})\r\nexport class MaterialDesignFrameworkComponent implements OnInit, OnChanges ,OnDestroy {\n private changeDetector = inject(ChangeDetectorRef);\n private jsf = inject(JsonSchemaFormService);\n jsfFLService = inject(FrameworkLibraryService);\n cssFWService = inject(CssframeworkService);\n\r\n frameworkInitialized = false;\r\n inputType: string;\r\n options: any; // Options used in this framework\r\n widgetLayoutNode: any; // layoutNode passed to child widget\r\n widgetOptions: any; // Options passed to child widget\r\n formControl: any = null;\r\n parentArray: any = null;\r\n isOrderable = false;\r\n dynamicTitle: string = null;\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n theme:string=\"material-default-theme\";\r\n frameworkThemeSubs:Subscription;\r\n constructor() {\n const cssFWService = this.cssFWService;\n\r\n let activeFramework:any=this.jsfFLService.activeFramework;\r\n let fwcfg=activeFramework.config||{};\r\n let defaultTheme=cssFrameworkCfgMaterialDesign.widgetstyles?.__themes__[0];\r\n let defaultThemeName=cssFWService.activeRequestedTheme||defaultTheme.name;\r\n this.theme=this.options?.theme|| defaultThemeName;\r\n this.frameworkThemeSubs= cssFWService.frameworkTheme$.subscribe(newTheme=>{\r\n this.theme=newTheme;\r\n })\r\n\r\n\r\n }\r\n ngOnDestroy(): void {\r\n this.frameworkThemeSubs.unsubscribe();\r\n this.frameworkThemeSubs=null;\r\n }\r\n\r\n get showRemoveButton(): boolean {\r\n const layoutNode = this.layoutNode();\n if (!layoutNode || !this.widgetOptions.removable ||\r\n this.widgetOptions.readonly || layoutNode.type === '$ref'\r\n ) {\r\n return false;\r\n }\r\n if (layoutNode.recursiveReference) {\r\n return true;\r\n }\r\n if (!layoutNode.arrayItem || !this.parentArray) {\r\n return false;\r\n }\r\n // If array length <= minItems, don't allow removing any items\r\n return this.parentArray.items.length - 1 <= this.parentArray.options.minItems ? false :\r\n // For removable list items, allow removing any item\r\n layoutNode.arrayItemType === 'list' ? true :\r\n // For removable tuple items, only allow removing last item in list\r\n this.layoutIndex()[this.layoutIndex().length - 1] === this.parentArray.items.length - 2;\r\n }\r\n\r\n ngOnInit() {\r\n this.initializeFramework();\r\n }\r\n\r\n ngOnChanges() {\r\n if (!this.frameworkInitialized) {\r\n this.initializeFramework();\r\n }\r\n if (this.dynamicTitle) {\r\n this.updateTitle();\r\n }\r\n }\r\n\r\n initializeFramework() {\r\n const layoutNode = this.layoutNode();\n if (layoutNode) {\r\n this.options = cloneDeep(layoutNode.options || {});\r\n this.widgetLayoutNode = {\r\n ...layoutNode,\r\n options: cloneDeep(layoutNode.options || {})\r\n };\r\n this.widgetOptions = this.widgetLayoutNode.options;\r\n this.formControl = this.jsf.getFormControl(this);\r\n\r\n if (\r\n isDefined(this.widgetOptions.minimum) &&\r\n isDefined(this.widgetOptions.maximum) &&\r\n this.widgetOptions.multipleOf >= 1\r\n ) {\r\n layoutNode.type = 'range';\r\n }\r\n\r\n if (\r\n !['$ref', 'advancedfieldset', 'authfieldset', 'button', 'card',\r\n 'checkbox', 'expansion-panel', 'help', 'message', 'msg', 'section',\r\n 'submit', 'tabarray', 'tabs'].includes(layoutNode.type) &&\r\n /{{.+?}}/.test(this.widgetOptions.title || '')\r\n ) {\r\n this.dynamicTitle = this.widgetOptions.title;\r\n this.updateTitle();\r\n }\r\n\r\n if (layoutNode.arrayItem && layoutNode.type !== '$ref') {\r\n this.parentArray = this.jsf.getParentNode(this);\r\n if (this.parentArray) {\r\n this.isOrderable =\r\n this.parentArray.type.slice(0, 3) !== 'tab' &&\r\n layoutNode.arrayItemType === 'list' &&\r\n !this.widgetOptions.readonly &&\r\n this.parentArray.options.orderable;\r\n }\r\n }\r\n\r\n this.frameworkInitialized = true;\r\n } else {\r\n this.options = {};\r\n }\r\n }\r\n\r\n updateTitle() {\r\n this.widgetLayoutNode.options.title = this.jsf.parseText(\r\n this.dynamicTitle,\r\n this.jsf.getFormControlValue(this),\r\n this.jsf.getFormControlGroup(this).value,\r\n this.dataIndex()[this.dataIndex().length - 1]\r\n );\r\n }\r\n\r\n removeItem() {\r\n this.jsf.removeItem(this);\r\n }\r\n}\r\n","<div [class]=\"theme\">\r\n <div class=\"mat-app-background\">\r\n\r\n \r\n\r\n <div [class.array-item]=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\" [orderable]=\"false\" [class.sortable-filter]=\"!isOrderable\" [dataIndex]=\"dataIndex()\" [layoutIndex]=\"layoutIndex()\" [layoutNode]=\"widgetLayoutNode\">\r\n <svg *ngIf=\"showRemoveButton\" xmlns=\"http://www.w3.org/2000/svg\" height=\"18\" width=\"18\" viewBox=\"0 0 24 24\" class=\"close-button\" (click)=\"removeItem()\">\r\n <path\r\n d=\"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z\"/>\r\n </svg>\r\n <select-widget-widget [dataIndex]=\"dataIndex()\" [layoutIndex]=\"layoutIndex()\" [layoutNode]=\"widgetLayoutNode\"></select-widget-widget>\r\n </div>\r\n <div class=\"spacer\" *ngIf=\"widgetLayoutNode?.arrayItem && widgetLayoutNode?.type !== '$ref'\"></div>\r\n </div>\r\n</div>","import { CdkDrag, CdkDragDrop } from '@angular/cdk/drag-drop';\r\nimport { ChangeDetectionStrategy, Component, inject, input, OnInit } from '@angular/core';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'flex-layout-root-widget',\r\n template: `\r\n <div cdkDropList (cdkDropListDropped)=\"drop($event)\" \r\n [class.flex-inherit]=\"true\"\r\n [cdkDropListSortPredicate]=\"sortPredicate\"\r\n >\r\n <div *ngFor=\"let layoutNode of layout(); let i = index\" \r\n cdkDrag [cdkDragStartDelay]=\"{touch:1000,mouse:0}\"\r\n \r\n [class.form-flex-item]=\"isFlexItem()\"\r\n [style.flex-grow]=\"getFlexAttribute(layoutNode, 'flex-grow')\"\r\n [style.flex-shrink]=\"getFlexAttribute(layoutNode, 'flex-shrink')\"\r\n [style.flex-basis]=\"getFlexAttribute(layoutNode, 'flex-basis')\"\r\n [style.align-self]=\"(layoutNode?.options || {})['align-self']\"\r\n [style.order]=\"layoutNode?.options?.order\"\r\n [attr.fxFlex]=\"layoutNode?.options?.fxFlex\"\r\n [attr.fxFlexOrder]=\"layoutNode?.options?.fxFlexOrder\"\r\n [attr.fxFlexOffset]=\"layoutNode?.options?.fxFlexOffset\"\r\n [attr.fxFlexAlign]=\"layoutNode?.options?.fxFlexAlign\"\r\n\r\n >\r\n \r\n <div *ngIf=\"layoutNode?.dataType !='object'\" cdkDragHandle>\r\n <p></p>\r\n </div>\r\n <select-framework-widget *ngIf=\"showWidget(layoutNode)\"\r\n \r\n [dataIndex]=\"layoutNode?.arrayItem ? (dataIndex() || []).concat(i) : (dataIndex() || [])\"\r\n [layoutIndex]=\"(layoutIndex() || []).concat(i)\"\r\n [layoutNode]=\"layoutNode\"></select-framework-widget>\r\n </div>\r\n </div>`,\r\n styles:`\r\n .example-list {\r\n width: 500px;\r\n max-width: 100%;\r\n border: solid 1px #ccc;\r\n min-height: 60px;\r\n display: block;\r\n background: white;\r\n border-radius: 4px;\r\n overflow: hidden;\r\n}\r\n\r\n.example-box {\r\n padding: 20px 10px;\r\n border-bottom: solid 1px #ccc;\r\n color: rgba(0, 0, 0, 0.87);\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-sizing: border-box;\r\n cursor: move;\r\n background: white;\r\n font-size: 14px;\r\n}\r\n\r\n.cdk-drag-preview {\r\n border: none;\r\n box-sizing: border-box;\r\n border-radius: 4px;\r\n box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),\r\n 0 8px 10px 1px rgba(0, 0, 0, 0.14),\r\n 0 3px 14px 2px rgba(0, 0, 0, 0.12);\r\n}\r\n\r\n.cdk-drag-placeholder {\r\n opacity: 0;\r\n}\r\n\r\n.cdk-drag-animating {\r\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\r\n}\r\n\r\n.example-box:last-child {\r\n border: none;\r\n}\r\n\r\n.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {\r\n transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\r\n}\r\n.flex-inherit{\r\n display:inherit;\r\n flex-flow:inherit;\r\n flex-wrap:inherit;\r\n flex-direction:inherit;\r\n width:100%\r\n}\r\n \r\n`,\r\n changeDetection: ChangeDetectionStrategy.Default,\r\n standalone: false\r\n})\r\nexport class FlexLayoutRootComponent implements OnInit {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n readonly dataIndex = input<number[]>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly layout = input<any[]>(undefined);\r\n readonly isFlexItem = input(false);\r\n ngOnInit() {\r\n\r\n }\r\n removeItem(item) {\r\n this.jsf.removeItem(item);\r\n }\r\n sortableObj: any;\r\n sortableConfig:any={\r\n filter:\".sortable-filter\",//needed to disable dragging on input range elements, class needs to be added to the element or its parent\r\n preventOnFilter: false,//needed for input range elements slider do still work\r\n onEnd: (/**Event*/evt)=> {\r\n\r\n \r\n }\r\n }\r\n sortableInit(sortable) {\r\n this.sortableObj = sortable;\r\n }\r\n\r\n drop(event: CdkDragDrop<string[]>) {\r\n // most likely why this event is used is to get the dragging element's current index\r\n // same properties as onEnd\r\n //console.log(`sortablejs event:${evt}`);\r\n let srcInd=event.previousIndex;\r\n let trgInd=event.currentIndex;\r\n let layoutItem=this.layout()[trgInd];\r\n let dataInd=layoutItem?.arrayItem ? (this.dataIndex() || []).concat(trgInd) : (this.dataIndex() || []);\r\n let layoutInd=(this.layoutIndex() || []).concat(trgInd)\r\n let itemCtx:any={\r\n dataIndex:()=>{return dataInd},\r\n layoutIndex:()=>{return layoutInd},\r\n layoutNode:()=>{return layoutItem},\r\n }\r\n //must set moveLayout to false as nxtSortable already moves it\r\n this.jsf.moveArrayItem(itemCtx, srcInd, trgInd,true);\r\n }\r\n\r\n /**\r\n * Predicate function that disallows '$ref' item sorts\r\n * NB declared as a var instead of a function \r\n * like sortPredicate(index: number, item: CdkDrag<number>){..}\r\n * since 'this' is bound to the draglist and doesn't reference the\r\n * FlexLayoutRootComponent instance\r\n */\r\n //TODO also need to think of other types such as button which can be\r\n //created by an arbitrary layout\r\n sortPredicate=(index: number, item: CdkDrag<number>)=> {\r\n let layoutItem=this.layout()[index];\r\n let result=layoutItem.type != '$ref';\r\n return result;\r\n }\r\n\r\n // Set attributes for flexbox child\r\n // (container attributes are set in flex-layout-section.component)\r\n getFlexAttribute(node: any, attribute: string) {\r\n const index = ['flex-grow', 'flex-shrink', 'flex-basis'].indexOf(attribute);\r\n return ((node.options || {}).flex || '').split(/\\s+/)[index] ||\r\n (node.options || {})[attribute] || ['1', '1', 'auto'][index];\r\n }\r\n\r\n showWidget(layoutNode: any): boolean {\r\n return this.jsf.evaluateCondition(layoutNode, this.dataIndex());\r\n }\r\n}\r\n","import { Component, OnInit, inject, input } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'flex-layout-section-widget',\r\n template: `\r\n\r\n <div *ngIf=\"containerType === 'div'\"\r\n [class]=\"options?.htmlClass || ''\"\r\n [class.expandable]=\"options?.expandable && !expanded\"\r\n [class.expanded]=\"options?.expandable && expanded\">\r\n <label *ngIf=\"sectionTitle\"\r\n [class]=\"'legend ' + (options?.labelHtmlClass || '')\"\r\n [innerHTML]=\"sectionTitle\"\r\n (click)=\"toggleExpanded()\"></label>\r\n <flex-layout-root-widget \r\n [layout]=\"layoutNode().items\"\r\n [dataIndex]=\"dataIndex()\"\r\n [layoutIndex]=\"layoutIndex()\"\r\n [isFlexItem]=\"getFlexAttribute('is-flex')\"\r\n [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\r\n [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\r\n [style.display]=\"!expanded?'none':getFlexAttribute('display')\"\r\n [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\r\n [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\r\n [style.justify-content]=\"getFlexAttribute('justify-content')\"\r\n [style.align-items]=\"getFlexAttribute('align-items')\"\r\n [style.align-content]=\"getFlexAttribute('align-content')\"\r\n [attr.fxLayout]=\"getFlexAttribute('layout')\"\r\n [attr.fxLayoutGap]=\"options?.fxLayoutGap\"\r\n [attr.fxLayoutAlign]=\"options?.fxLayoutAlign\"\r\n [attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>\r\n </div>\r\n\r\n <fieldset *ngIf=\"containerType === 'fieldset'\"\r\n [class]=\"options?.htmlClass || ''\"\r\n [class.expandable]=\"options?.expandable && !expanded\"\r\n [class.expanded]=\"options?.expandable && expanded\"\r\n [disabled]=\"options?.readonly\">\r\n <legend *ngIf=\"sectionTitle\"\r\n [class]=\"'legend ' + (options?.labelHtmlClass || '')\"\r\n [innerHTML]=\"sectionTitle\"\r\n (click)=\"toggleExpanded()\"></legend>\r\n <flex-layout-root-widget \r\n [layout]=\"layoutNode().items\"\r\n [dataIndex]=\"dataIndex()\"\r\n [layoutIndex]=\"layoutIndex()\"\r\n [isFlexItem]=\"getFlexAttribute('is-flex')\"\r\n [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\r\n [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\r\n [style.display]=\"!expanded?'none':getFlexAttribute('display')\"\r\n [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\r\n [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\r\n [style.justify-content]=\"getFlexAttribute('justify-content')\"\r\n [style.align-items]=\"getFlexAttribute('align-items')\"\r\n [style.align-content]=\"getFlexAttribute('align-content')\"\r\n [attr.fxLayout]=\"getFlexAttribute('layout')\"\r\n [attr.fxLayoutGap]=\"options?.fxLayoutGap\"\r\n [attr.fxLayoutAlign]=\"options?.fxLayoutAlign\"\r\n [attr.attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>\r\n </fieldset>\r\n\r\n <mat-card appearance=\"outlined\" *ngIf=\"containerType === 'card'\"\r\n [ngClass]=\"options?.htmlClass || ''\"\r\n [class.expandable]=\"options?.expandable && !expanded\"\r\n [class.expanded]=\"options?.expandable && expanded\">\r\n <mat-card-header *ngIf=\"sectionTitle\">\r\n <legend\r\n [class]=\"'legend ' + (options?.labelHtmlClass || '')\"\r\n [innerHTML]=\"sectionTitle\"\r\n (click)=\"toggleExpanded()\"></legend>\r\n </mat-card-header>\r\n <mat-card-content >\r\n <fieldset [disabled]=\"options?.readonly\">\r\n <flex-layout-root-widget \r\n [layout]=\"layoutNode().items\"\r\n [dataIndex]=\"dataIndex()\"\r\n [layoutIndex]=\"layoutIndex()\"\r\n [isFlexItem]=\"getFlexAttribute('is-flex')\"\r\n [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\r\n [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\r\n [style.display]=\"!expanded?'none':getFlexAttribute('display')\"\r\n [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\r\n [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\r\n [style.justify-content]=\"getFlexAttribute('justify-content')\"\r\n [style.align-items]=\"getFlexAttribute('align-items')\"\r\n [style.align-content]=\"getFlexAttribute('align-content')\"\r\n [attr.fxLayout]=\"getFlexAttribute('layout')\"\r\n [attr.fxLayoutGap]=\"options?.fxLayoutGap\"\r\n [attr.fxLayoutAlign]=\"options?.fxLayoutAlign\"\r\n [attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\r\n </fieldset>\r\n </mat-card-content>\r\n <mat-card-footer>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>\r\n </mat-card-footer>\r\n </mat-card>\r\n\r\n <mat-expansion-panel *ngIf=\"containerType === 'expansion-panel'\"\r\n [expanded]=\"expanded\"\r\n [hideToggle]=\"!options?.expandable\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <legend *ngIf=\"sectionTitle\"\r\n [class]=\"options?.labelHtmlClass\"\r\n [innerHTML]=\"sectionTitle\"\r\n (click)=\"toggleExpanded()\"></legend>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <fieldset [disabled]=\"options?.readonly\">\r\n <flex-layout-root-widget \r\n [layout]=\"layoutNode().items\"\r\n [dataIndex]=\"dataIndex()\"\r\n [layoutIndex]=\"layoutIndex()\"\r\n [isFlexItem]=\"getFlexAttribute('is-flex')\"\r\n [class.form-flex-column]=\"getFlexAttribute('flex-direction') === 'column'\"\r\n [class.form-flex-row]=\"getFlexAttribute('flex-direction') === 'row'\"\r\n [style.display]=\"!expanded?'none':getFlexAttribute('display')\"\r\n [style.flex-direction]=\"getFlexAttribute('flex-direction')\"\r\n [style.flex-wrap]=\"getFlexAttribute('flex-wrap')\"\r\n [style.justify-content]=\"getFlexAttribute('justify-content')\"\r\n [style.align-items]=\"getFlexAttribute('align-items')\"\r\n [style.align-content]=\"getFlexAttribute('align-content')\"\r\n [attr.fxLayout]=\"getFlexAttribute('layout')\"\r\n [attr.fxLayoutGap]=\"options?.fxLayoutGap\"\r\n [attr.fxLayoutAlign]=\"options?.fxLayoutAlign\"\r\n [attr.fxFlexFill]=\"options?.fxLayoutAlign\"></flex-layout-root-widget>\r\n </fieldset>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>\r\n </mat-expansion-panel>`,\r\n styles: [`\r\n fieldset { border: 0; margin: 0; padding: 0; }\r\n .legend { font-weight: bold; }\r\n .expandable > .legend:before { content: '▶'; padding-right: .3em; font-family:auto }\r\n .expanded > .legend:before { content: '▼'; padding-right: .2em; }\r\n `],\r\n standalone: false\r\n})\r\nexport class FlexLayoutSectionComponent implements OnInit {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n controlValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n expanded = true;\r\n containerType = 'div';\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n get sectionTitle() {\r\n return this.options.notitle ? null : this.jsf.setItemTitle(this);\r\n }\r\n\r\n ngOnInit() {\r\n this.jsf.initializeControl(this);\r\n this.options = this.layoutNode().options || {};\r\n this.expanded = typeof this.options.expanded === 'boolean' ?\r\n this.options.expanded : !this.options.expandable;\r\n switch (this.layoutNode().type) {\r\n case 'section': case 'array': case 'fieldset': case 'advancedfieldset':\r\n case 'authfieldset': case 'optionfieldset': case 'selectfieldset':\r\n this.containerType = 'fieldset';\r\n break;\r\n case 'card':\r\n this.containerType = 'card';\r\n break;\r\n case 'expansion-panel':\r\n this.containerType = 'expansion-panel';\r\n break;\r\n default: // 'div', 'flex', 'tab', 'conditional', 'actions'\r\n this.containerType = 'div';\r\n }\r\n }\r\n\r\n toggleExpanded() {\r\n if (this.options.expandable) { this.expanded = !this.expanded; }\r\n }\r\n\r\n // Set attributes for flexbox container\r\n // (child attributes are set in flex-layout-root.component)\r\n getFlexAttribute(attribute: string) {\r\n const flexActive: boolean =\r\n this.layoutNode().type === 'flex' ||\r\n !!this.options.displayFlex ||\r\n this.options.display === 'flex';\r\n // if (attribute !== 'flex' && !flexActive) { return null; }\r\n switch (attribute) {\r\n case 'is-flex':\r\n return flexActive;\r\n case 'display':\r\n return flexActive ? 'flex' : 'initial';\r\n case 'flex-direction': case 'flex-wrap':\r\n const index = ['flex-direction', 'flex-wrap'].indexOf(attribute);\r\n return (this.options['flex-flow'] || '').split(/\\s+/)[index] ||\r\n this.options[attribute] || ['column', 'nowrap'][index];\r\n case 'justify-content': case 'align-items': case 'align-content':\r\n return this.options[attribute];\r\n case 'layout':\r\n return (this.options.fxLayout || 'row') +\r\n this.options.fxLayoutWrap ? ' ' + this.options.fxLayoutWrap : '';\r\n\r\n }\r\n }\r\n}\r\n","import { ChangeDetectionStrategy, Component, OnInit, input, inject } from '@angular/core';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n\r\n@Component({\n // tslint:disable-next-line:component-selector\n selector: 'material-add-reference-widget',\n template: `\r\n <section [class]=\"options?.htmlClass || ''\" align=\"end\">\r\n <button mat-raised-button *ngIf=\"showAddButton\"\r\n [color]=\"options?.color || 'accent'\"\r\n [disabled]=\"options?.readonly\"\r\n (click)=\"addItem($event)\">\r\n <span *ngIf=\"options?.icon\" [class]=\"options?.icon\"></span>\r\n <span *ngIf=\"options?.title\" [innerHTML]=\"buttonText\"></span>\r\n </button>\r\n </section>`,\n changeDetection: ChangeDetectionStrategy.Default,\n standalone: false\n})\r\nexport class MaterialAddReferenceComponent implements OnInit {\n private jsf = inject(JsonSchemaFormService);\n\r\n options: any;\r\n itemCount: number;\r\n previousLayoutIndex: number[];\r\n previousDataIndex: number[];\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n }\r\n\r\n get showAddButton(): boolean {\r\n return !this.layoutNode().arrayItem ||\r\n this.layoutIndex()[this.layoutIndex().length - 1] < this.options.maxItems;\r\n }\r\n\r\n addItem(event) {\r\n event.preventDefault();\r\n this.jsf.addItem(this);\r\n }\r\n\r\n get buttonText(): string {\r\n const parent: any = {\r\n dataIndex: this.dataIndex().slice(0, -1),\r\n layoutIndex: this.layoutIndex().slice(0, -1),\r\n layoutNode: this.jsf.getParentNode(this),\r\n };\r\n return parent.layoutNode.add ||\r\n this.jsf.setArrayItemTitle(parent, this.layoutNode(), this.itemCount);\r\n }\r\n}\r\n","import { Component, OnDestroy, OnInit, inject, input } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { JsonSchemaFormService, hasOwn } from '@ng-formworks/core';\r\nimport { Subscription } from 'rxjs';\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'material-button-widget',\r\n template: `\r\n <div class=\"button-row\" [class]=\"options?.htmlClass || ''\">\r\n <button mat-raised-button\r\n [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\r\n [attr.aria-describedby]=\"'control' + layoutNode()?._id + 'Status'\"\r\n [color]=\"options?.color || 'primary'\"\r\n [disabled]=\"controlDisabled || options?.readonly\"\r\n [id]=\"'control' + layoutNode()?._id\"\r\n [name]=\"controlName\"\r\n [type]=\"layoutNode()?.type\"\r\n [value]=\"controlValue\"\r\n (click)=\"updateValue($event)\">\r\n <mat-icon *ngIf=\"options?.icon\" class=\"mat-24\">{{options?.icon}}</mat-icon>\r\n <span *ngIf=\"options?.title\" [innerHTML]=\"options?.title\"></span>\r\n </button>\r\n </div>`,\r\n styles: [` button { margin-top: 10px; } `],\r\n standalone: false\r\n})\r\nexport class MaterialButtonComponent implements OnInit,OnDestroy {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n controlValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n isValidChangesSubs:Subscription;\r\n\r\n ngOnDestroy(): void {\r\n this.isValidChangesSubs?.unsubscribe();\r\n this.isValidChangesSubs=null;\r\n this.updateValue({target:{value:null}});\r\n }\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n this.jsf.initializeControl(this);\r\n if (hasOwn(this.options, 'disabled')) {\r\n this.controlDisabled = this.options.disabled;\r\n } else if (this.jsf.formOptions.disableInvalidSubmit) {\r\n this.controlDisabled = !this.jsf.isValid;\r\n this.jsf.isValidChanges.subscribe(isValid => this.controlDisabled = !isValid);\r\n }\r\n }\r\n\r\n updateValue(event) {\r\n if (typeof this.options.onClick === 'function') {\r\n this.options.onClick(event);\r\n } else {\r\n this.jsf.updateValue(this, event.target.value);\r\n }\r\n }\r\n\r\n \r\n}\r\n","import { Component, OnDestroy, OnInit, inject, input } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { JsonSchemaFormService, buildTitleMap } from '@ng-formworks/core';\r\n\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'material-button-group-widget',\r\n template: `\r\n <div>\r\n <div *ngIf=\"options?.title\">\r\n <label\r\n [attr.for]=\"'control' + layoutNode()?._id\"\r\n [class]=\"options?.labelHtmlClass || ''\"\r\n [style.display]=\"options?.notitle ? 'none' : ''\"\r\n [innerHTML]=\"options?.title\"></label>\r\n </div>\r\n <mat-button-toggle-group\r\n [attr.aria-describedby]=\"'control' + layoutNode()?._id + 'Status'\"\r\n [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\r\n [attr.required]=\"options?.required\"\r\n [disabled]=\"controlDisabled || options?.readonly\"\r\n [name]=\"controlName\"\r\n [value]=\"controlValue\"\r\n [vertical]=\"!!options.vertical\">\r\n <mat-button-toggle *ngFor=\"let radioItem of radiosList\"\r\n [id]=\"'control' + layoutNode()?._id + '/' + radioItem?.name\"\r\n [value]=\"radioItem?.value\"\r\n (click)=\"updateValue(radioItem?.value)\">\r\n <span [innerHTML]=\"radioItem?.name\"></span>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>\r\n </div>`,\r\n styles: [` mat-error { font-size: 75%; } `],\r\n standalone: false\r\n})\r\nexport class MaterialButtonGroupComponent implements OnInit,OnDestroy {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n controlValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n radiosList: any[] = [];\r\n vertical = false;\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n this.radiosList = buildTitleMap(\r\n this.options.titleMap || this.options.enumNames,\r\n this.options.enum, true\r\n );\r\n this.jsf.initializeControl(this);\r\n }\r\n\r\n updateValue(value) {\r\n this.options.showErrors = true;\r\n this.jsf.updateValue(this, value);\r\n }\r\n ngOnDestroy () {\r\n this.jsf.updateValue(this, null);\r\n }\r\n}\r\n","import { Component, inject, input, OnDestroy, OnInit } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'material-checkbox-widget',\r\n template: `\r\n <mat-checkbox *ngIf=\"boundControl && !showSlideToggle\"\r\n [formControl]=\"formControl\"\r\n align=\"left\"\r\n [color]=\"options?.color || 'primary'\"\r\n [id]=\"'control' + layoutNode()?._id\"\r\n labelPosition=\"after\"\r\n [name]=\"controlName\"\r\n (blur)=\"options.showErrors = true\">\r\n <span *ngIf=\"options?.title\"\r\n class=\"checkbox-name\"\r\n [style.display]=\"options?.notitle ? 'none' : ''\"\r\n [innerHTML]=\"options?.title\"></span>\r\n </mat-checkbox>\r\n <mat-checkbox *ngIf=\"!boundControl && !showSlideToggle\"\r\n align=\"left\"\r\n [color]=\"options?.color || 'primary'\"\r\n [disabled]=\"controlDisabled || options?.readonly\"\r\n [id]=\"'control' + layoutNode()?._id\"\r\n labelPosition=\"after\"\r\n [name]=\"controlName\"\r\n [checked]=\"isChecked\"\r\n (blur)=\"options.showErrors = true\"\r\n (change)=\"updateValue($event)\">\r\n <span *ngIf=\"options?.title\"\r\n class=\"checkbox-name\"\r\n [style.display]=\"options?.notitle ? 'none' : ''\"\r\n [innerHTML]=\"options?.title\"></span>\r\n </mat-checkbox>\r\n <mat-slide-toggle *ngIf=\"boundControl && showSlideToggle\"\r\n [formControl]=\"formControl\"\r\n align=\"left\"\r\n [color]=\"options?.color || 'primary'\"\r\n [id]=\"'control' + layoutNode()?._id\"\r\n labelPosition=\"after\"\r\n [name]=\"controlName\"\r\n (blur)=\"options.showErrors = true\">\r\n <span *ngIf=\"options?.title\"\r\n class=\"checkbox-name\"\r\n [style.display]=\"options?.notitle ? 'none' : ''\"\r\n [innerHTML]=\"options?.title\"></span>\r\n </mat-slide-toggle>\r\n <mat-slide-toggle *ngIf=\"!boundControl && showSlideToggle\"\r\n align=\"left\"\r\n [color]=\"options?.color || 'primary'\"\r\n [disabled]=\"controlDisabled || options?.readonly\"\r\n [id]=\"'control' + layoutNode()?._id\"\r\n labelPosition=\"after\"\r\n [name]=\"controlName\"\r\n [checked]=\"isChecked\"\r\n (blur)=\"options.showErrors = true\"\r\n (change)=\"updateValue($event)\">\r\n <span *ngIf=\"options?.title\"\r\n class=\"checkbox-name\"\r\n [style.display]=\"options?.notitle ? 'none' : ''\"\r\n [innerHTML]=\"options?.title\"></span>\r\n </mat-slide-toggle>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>`,\r\n styles: [`\r\n .checkbox-name { white-space: nowrap; }\r\n mat-error { font-size: 75%; }\r\n `],\r\n standalone: false\r\n})\r\nexport class MaterialCheckboxComponent implements OnInit,OnDestroy {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n controlValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n trueValue: any = true;\r\n falseValue: any = false;\r\n showSlideToggle = false;\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n this.jsf.initializeControl(this, !this.options.readonly);\r\n if (this.controlValue === null || this.controlValue === undefined) {\r\n this.controlValue = false;\r\n this.jsf.updateValue(this, this.falseValue);\r\n }\r\n const layoutNode = this.layoutNode();\r\n if (layoutNode.type === 'slide-toggle' ||\r\n layoutNode.format === 'slide-toggle'\r\n ) {\r\n this.showSlideToggle = true;\r\n }\r\n }\r\n\r\n updateValue(event) {\r\n this.options.showErrors = true;\r\n this.jsf.updateValue(this, event.checked ? this.trueValue : this.falseValue);\r\n }\r\n\r\n get isChecked() {\r\n return this.jsf.getFormControlValue(this) === this.trueValue;\r\n }\r\n\r\n ngOnDestroy () {\r\n this.jsf.updateValue(this, null);\r\n }\r\n}\r\n","import { Component, OnDestroy, OnInit, inject, input } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { JsonSchemaFormService, TitleMapItem, buildTitleMap } from '@ng-formworks/core';\r\n\r\n// TODO: Change this to use a Selection List instead?\r\n// https://material.angular.io/components/list/overview\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'material-checkboxes-widget',\r\n template: `\r\n <div>\r\n <mat-checkbox type=\"checkbox\"\r\n [checked]=\"allChecked\"\r\n [color]=\"options?.color || 'primary'\"\r\n [disabled]=\"controlDisabled || options?.readonly\"\r\n [indeterminate]=\"someChecked\"\r\n [name]=\"options?.name\"\r\n (blur)=\"options.showErrors = true\"\r\n (change)=\"updateAllValues($event)\">\r\n <span class=\"checkbox-name\" [innerHTML]=\"options?.name\"></span>\r\n </mat-checkbox>\r\n <label *ngIf=\"options?.title\"\r\n class=\"title\"\r\n [class]=\"options?.labelHtmlClass || ''\"\r\n [style.display]=\"options?.notitle ? 'none' : ''\"\r\n [innerHTML]=\"options?.title\"></label>\r\n <ul class=\"checkbox-list\" [class.horizontal-list]=\"horizontalList\">\r\n <li *ngFor=\"let checkboxItem of checkboxList\"\r\n [class]=\"options?.htmlClass || ''\">\r\n <mat-checkbox type=\"checkbox\"\r\n [(ngModel)]=\"checkboxItem.checked\"\r\n [color]=\"options?.color || 'primary'\"\r\n [disabled]=\"controlDisabled || options?.readonly\"\r\n [name]=\"checkboxItem?.name\"\r\n (blur)=\"options.showErrors = true\"\r\n (change)=\"updateValue()\">\r\n <span class=\"checkbox-name\" [innerHTML]=\"checkboxItem?.name\"></span>\r\n </mat-checkbox>\r\n </li>\r\n </ul>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>\r\n </div>`,\r\n styles: [`\r\n .title { font-weight: bold; }\r\n .checkbox-list { list-style-type: none; }\r\n .horizontal-list > li { display: inline-block; margin-right: 10px; zoom: 1; }\r\n .checkbox-name { white-space: nowrap; }\r\n mat-error { font-size: 75%; }\r\n `],\r\n standalone: false\r\n})\r\nexport class MaterialCheckboxesComponent implements OnInit,OnDestroy {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n controlValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n horizontalList = false;\r\n formArray: AbstractControl;\r\n checkboxList: TitleMapItem[] = [];\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n const layoutNode = this.layoutNode();\r\n this.horizontalList = layoutNode.type === 'checkboxes-inline' ||\r\n layoutNode.type === 'checkboxbuttons';\r\n this.jsf.initializeControl(this);\r\n this.checkboxList = buildTitleMap(\r\n this.options.titleMap || this.options.enumNames, this.options.enum, true\r\n );\r\n if (this.boundControl) {\r\n const formArray = this.jsf.getFormControl(this);\r\n for (const checkboxItem of this.checkboxList) {\r\n checkboxItem.checked = formArray.value.includes(checkboxItem.value);\r\n }\r\n }\r\n }\r\n\r\n get allChecked(): boolean {\r\n return this.checkboxList.filter(t => t.checked).length === this.checkboxList.length;\r\n }\r\n\r\n get someChecked(): boolean {\r\n const checkedItems = this.checkboxList.filter(t => t.checked).length;\r\n return checkedItems > 0 && checkedItems < this.checkboxList.length;\r\n }\r\n\r\n updateValue() {\r\n this.options.showErrors = true;\r\n if (this.boundControl) {\r\n this.jsf.updateArrayCheckboxList(this, this.checkboxList);\r\n }\r\n }\r\n\r\n updateAllValues(event: any) {\r\n this.options.showErrors = true;\r\n this.checkboxList.forEach(t => t.checked = event.checked);\r\n this.updateValue();\r\n }\r\n \r\n //TODO review this\r\n ngOnDestroy () {\r\n //this.jsf.updateValue(this, null);\r\n let nullVal=[];\r\n this.formControl.reset(nullVal)\r\n this.controlValue=null;\r\n }\r\n}\r\n","import { Component, inject, input, OnDestroy, OnInit } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n// TODO: Add this control\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'material-chip-list-widget',\r\n template: ``,\r\n standalone: false\r\n})\r\nexport class MaterialChipListComponent implements OnInit,OnDestroy {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n controlValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n this.jsf.initializeControl(this);\r\n }\r\n\r\n updateValue(event) {\r\n this.jsf.updateValue(this, event.target.value);\r\n }\r\n\r\n ngOnDestroy () {\r\n this.jsf.updateValue(this, null);\r\n }\r\n\r\n}\r\n","import { Component, inject, input, OnDestroy, OnInit } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'material-datepicker-widget',\r\n template: `\r\n <mat-form-field [appearance]=\"options?.appearance || matFormFieldDefaultOptions?.appearance || 'fill'\"\r\n [class]=\"options?.htmlClass || ''\"\r\n [floatLabel]=\"options?.floatLabel || matFormFieldDefaultOptions?.floatLabel || (options?.notitle ? 'never' : 'auto')\"\r\n [hideRequiredMarker]=\"options?.hideRequired ? 'true' : 'false'\"\r\n [style.width]=\"'100%'\">\r\n <mat-label *ngIf=\"!options?.notitle\">{{options?.title}}</mat-label>\r\n <span matPrefix *ngIf=\"options?.prefix || options?.fieldAddonLeft\"\r\n [innerHTML]=\"options?.prefix || options?.fieldAddonLeft\"></span>\r\n <input matInput *ngIf=\"boundControl\"\r\n [formControl]=\"formControl\"\r\n [attr.aria-describedby]=\"'control' + layoutNode()?._id + 'Status'\"\r\n [attr.list]=\"'control' + layoutNode()?._id + 'Autocomplete'\"\r\n [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\r\n [id]=\"'control' + layoutNode()?._id\"\r\n [max]=\"options?.maximum\"\r\n [matDatepicker]=\"picker\"\r\n [min]=\"options?.minimum\"\r\n [name]=\"controlName\"\r\n [placeholder]=\"options?.title\"\r\n [readonly]=\"options?.readonly\"\r\n [required]=\"options?.required\"\r\n [style.width]=\"'100%'\"\r\n (blur)=\"options.showErrors = true\"\r\n >\r\n <input matInput *ngIf=\"!boundControl\"\r\n [attr.aria-describedby]=\"'control' + layoutNode()?._id + 'Status'\"\r\n [attr.list]=\"'control' + layoutNode()?._id + 'Autocomplete'\"\r\n [attr.readonly]=\"options?.readonly ? 'readonly' : null\"\r\n [disabled]=\"controlDisabled || options?.readonly\"\r\n [id]=\"'control' + layoutNode()?._id\"\r\n [max]=\"options?.maximum\"\r\n [matDatepicker]=\"picker\"\r\n [min]=\"options?.minimum\"\r\n [name]=\"controlName\"\r\n [placeholder]=\"options?.title\"\r\n [required]=\"options?.required\"\r\n [style.width]=\"'100%'\"\r\n [readonly]=\"options?.readonly\"\r\n (blur)=\"options.showErrors = true\"\r\n >\r\n <span matSuffix *ngIf=\"options?.suffix || options?.fieldAddonRight\"\r\n [innerHTML]=\"options?.suffix || options?.fieldAddonRight\"></span>\r\n <mat-hint *ngIf=\"options?.description && (!options?.showErrors || !options?.errorMessage)\"\r\n align=\"end\" [innerHTML]=\"options?.description\"></mat-hint>\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n </mat-form-field>\r\n <mat-datepicker #picker ></mat-datepicker>\r\n <mat-error *ngIf=\"options?.showErrors && options?.errorMessage\"\r\n [innerHTML]=\"options?.errorMessage\"></mat-error>`,\r\n styles: [`\r\n mat-error { font-size: 75%; margin-top: -1rem; margin-bottom: 0.5rem; }\r\n ::ng-deep json-schema-form mat-form-field .mat-mdc-form-field-wrapper .mat-form-field-flex\r\n .mat-form-field-infix { width: initial; }\r\n `],\r\n standalone: false\r\n})\r\nexport class MaterialDatepickerComponent implements OnInit,OnDestroy {\r\n matFormFieldDefaultOptions = inject(MAT_FORM_FIELD_DEFAULT_OPTIONS, { optional: true });\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n dateValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n autoCompleteList: string[] = [];\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n this.jsf.initializeControl(this, !this.options.readonly);\r\n if (!this.options.notitle && !this.options.description && this.options.placeholder) {\r\n this.options.description = this.options.placeholder;\r\n }\r\n }\r\n\r\n ngOnDestroy () {\r\n this.jsf.updateValue(this, null);\r\n }\r\n}\r\n","import { Component, inject, input, OnDestroy, OnInit } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n// TODO: Add this control\r\n\r\n@Component({\r\n // tslint:disable-next-line:component-selector\r\n selector: 'material-file-widget',\r\n template: ``,\r\n standalone: false\r\n})\r\nexport class MaterialFileComponent implements OnInit,OnDestroy {\r\n private jsf = inject(JsonSchemaFormService);\r\n\r\n formControl: AbstractControl;\r\n controlName: string;\r\n controlValue: any;\r\n controlDisabled = false;\r\n boundControl = false;\r\n options: any;\r\n readonly layoutNode = input<any>(undefined);\r\n readonly layoutIndex = input<number[]>(undefined);\r\n readonly dataIndex = input<number[]>(undefined);\r\n\r\n ngOnInit() {\r\n this.options = this.layoutNode().options || {};\r\n this.jsf.initializeControl(this);\r\n }\r\n\r\n updateValue(event) {\r\n this.jsf.updateValue(this, event.target.value);\r\n }\r\n\r\n ngOnDestroy () {\r\n this.jsf.updateValue(this, null);\r\n }\r\n}\r\n","import { Component, ElementRef, OnDestroy, OnInit, inject, input, viewChild } from '@angular/core';\r\nimport { AbstractControl } from '@angular/forms';\r\nimport { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';\r\nimport { JsonSchemaFormService } from '@ng-formworks/core';\r\n\r\n@Component({\r\n // tslint:disable