SmartComponent Library NG
  1. Components
  2. SmartFrameComponent

File

src/ui/frame/smart-frame.component.ts

Extends

AbstractFormChild

Implements

OnInit OnDestroy AfterViewInit

Metadata

selector smart-frame
styleUrls ../viewer/smart-viewer.component.css
templateUrl ./smart-frame.component.html
viewProviders SmartViewerHelperService

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor(registry: SmartFrameRegistryService, elementRef: ElementRef, helperService: SmartViewerHelperService, smartConfig: SmartConfig, injector: Injector, renderer: Renderer2, smartHttp: SmartHttpService, smartServiceAdapter: SmartServiceAdapter)
Parameters :
Name Type Optional
registry SmartFrameRegistryService No
elementRef ElementRef No
helperService SmartViewerHelperService No
smartConfig SmartConfig No
injector Injector No
renderer Renderer2 No
smartHttp SmartHttpService No
smartServiceAdapter SmartServiceAdapter No

Inputs

smart-frame-layout
Type : any
smart-frame-settings
Type : literal type

Styling and/or class list of the Smart Frame
smart-object-name
Type : string
value
Type : any

Outputs

frameButtonClicked
Type : EventEmitter<any>
inputBlurred
Type : EventEmitter<string>
inputFocused
Type : EventEmitter<string>
inputValueChanged
Type : EventEmitter<InputChangedEventArgs>
valueChange
Type : EventEmitter<any>

Methods

componentLoaded
componentLoaded()
Returns : void
Public handleLayoutChange
handleLayoutChange(newLayout: literal type)
Parameters :
Name Type Optional
newLayout literal type No
Returns : void
trackBy
trackBy(index: number)
Parameters :
Name Type Optional
index number No
Returns : number

Properties

fieldHeightsAdded
Type : boolean
fields
Type : SmartViewerFormItem[]
Default value : []
fieldsetHeightsAdded
Type : boolean
hasAbsolutePosition
Default value : false
maxDepthValue
Type : number
Default value : 0
viewerFormPadding
Type : number
Default value : 0

Accessors

value
getvalue()
Returns : any
setvalue(newValue: any)
Parameters :
Name Type Optional
newValue any No
Returns : void
frameSettings
getframeSettings()
Returns : literal type
setframeSettings(value: literal type)

Styling and/or class list of the Smart Frame

Parameters :
Name Type Optional
value literal type No
Returns : void
frameFormDomElement
getframeFormDomElement()
Returns : ElementRef
setframeFormDomElement(frameForm)
Parameters :
Name Optional
frameForm No
Returns : void
fieldChildren
setfieldChildren(fieldChildren)
Parameters :
Name Optional
fieldChildren No
Returns : void
fieldsetChildren
setfieldsetChildren(fieldsetChildren)
Parameters :
Name Optional
fieldsetChildren No
Returns : void 
<div 
    #container  id="form-container"
    [ngClass]="frameSettings?.classList || {}">
        <form #frameForm class="k-form" [ngClass]="(frameSettings?.classList?.indexOf('labels-left') > -1 || hasAbsolutePosition) ? 'k-form-inline' : 'k-form'">
            <ng-container *ngFor="let formItem of fields let i=index trackBy: trackBy">
                <smart-viewer-fieldset 
                    *ngIf="formItem.type === 'fieldset'"
                    [definition]="formItem"
                    [itemIndex]="i"
                    [inline-labels]="frameSettings?.classList?.indexOf('labels-left') > -1 || hasAbsolutePosition">
                </smart-viewer-fieldset>
                <smart-viewer-group
                    *ngIf="formItem.type === 'group'"
                    [definition]="formItem">
                </smart-viewer-group>
                <smart-viewer-field
                    [ngClass]="{ first: i === 0 }"
                    *ngIf="formItem.type !== 'fieldset' && formItem.type !== 'group'"
                    [field]="formItem"
                    [inline-label]="frameSettings?.classList?.indexOf('labels-left') > -1 || hasAbsolutePosition">
                </smart-viewer-field> 
            </ng-container>
        </form>
</div>

../viewer/smart-viewer.component.css 

::ng-deep kendo-numerictextbox .k-numeric-wrap input.k-input {
    text-align: right !important;
    height: 100% !important
}

 ::ng-deep input[disabled],
textarea[disabled],
select[disabled],
[smart-widget-disabled] {
    background-color: #eee !important;
}

::ng-deep input, ::ng-deep label {
    font-weight: normal !important;
}

::ng-deep form.k-form {
    padding-left: 0px !important;
    padding-right: 0px !important;
    position: relative !important;
}

#form-container {
    overflow-y: auto !important;
}

::ng-deep .absolute-layout .k-form-field.smart-checkbox label,
::ng-deep .absolute-layout .k-form-field span {
    white-space: nowrap !important;
}

::ng-deep .absolute-layout .smart-viewer-fieldset {
    margin-top: 0px !important;
}
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""