/**
*
* @license
* Copyright 2017 SAP Ariba
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*
*
*/
import { AfterContentInit, EventEmitter, QueryList, SimpleChanges } from '@angular/core';
import { Environment } from '@aribaui/core';
import { BottomZoneComponent, LeftZoneComponent, MiddleZoneComponent, RightZoneComponent, TopZoneComponent } from '../five-zone-layout.component';
import { FormRowComponent } from './form-row/form-row.component';
import { BaseFormComponent } from '../../core/base-form.component';
/**
* FormTable is a specific layout component for rendering Labels and its controls in two columns
* and 5 different zones.
*
* We support LEFT, MIDDLE, RIGHT, TOP, BOTTOM zone where we can place our component or widgets.
* This
* component is used as primary layout to wrap all the common use cases. E.g. When we lay out
* fields in the form I do not want controls to be aware of error validation, size, labels, and
* some other things. Control such INPUT is just responsible for retrieve user value but not how it
* appear on the page.
*
* This way we can be flexible how we treat widgets for different kinds of situation depending
* where they appear
* FormTable just like the rest of the components are using Model driven approach how to work with
* data, mean we are using FormGroup, FormControl etc. FormGroup can be passed into the FormTable,
* otherwise its automatically created when the FormTable is instantiated.
*
* FormGroup is saved insode Environment where we are using this to pass this around the pages and
* components.
*
* ### Example
*
* Simple Layout fields and its control
*
*
* ```typescript
* @Component({
* selector: 'wrapper-comp' ,
* template: `
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* `
* })
* export class ShowUserInfoComponent
* {
* checkBoxListValues: string[] = ['blue' , 'red' , 'yellow' , 'orange' , 'white' , 'silver'
* , 'black' , 'Green'
* , 'Gray' , 'Navy' ,
* 'Olive' , 'Aqua' , 'Purple'];
* selectedValues: string[] = ['blue' , 'Olive' , 'Aqua' , 'Purple'];
* rbValues: string[] = ['male' , 'female' , 'other'];
* rbSelection: string = 'male';
* editable: boolean = true;
* showTime: boolean = true;
*
* formGroup: FormGroup = new FormGroup({});
*
*
* onCBClick (event): void
* {
* console.log('onCBClick = ' + event);
* }
*
* onSubmit (model: any): void
* {
* console.log(model)
*
* // will print { name:null, myColors:['blue' , 'Olive' , 'Aqua' , 'Purple'], gender:
* male}
* }
*
* }
*
* ```
*
* Or you can use zone to layout these fields into two columns:
*
* Current zones are implement with which is just a selector to searches for
* specific pattern. In our case instead of creating extra wrapper custom component use simple
* CSS class
*
*
* ```
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
* ```
*
* todo: remove my css selectors for zones and replace it with real component even just a tag
* todo: would work file
*
*/
export declare class FormTableComponent extends BaseFormComponent implements AfterContentInit {
env: Environment;
/**
* Used for the form layout to see if we need to render labels stacked or side by side next to
* the control
*
*/
labelsOnTop?: boolean;
/**
*
* Is this a 4 zone layout
*
*/
useFiveZone?: boolean;
/**
* For certain usecase we dont want to set automatically this to all children
*/
editabilityCheck: boolean;
/**
* Triggers when the