angular-jsf-components/src/components/ace-dialog/ace-dialog.component.html

JSF Compliant Angular Components

<div id={this.state.id}>
    <div *ngIf="visible" class="ui-widget-overlay" [ngStyle]="{
       width: window.innerWidth,
       height: window.innerHeight,
       zIndex: 1001
       }"></div>
    <div #dialog
         class="ui-dialog ui-widget ui-widget-content ui-corner-all {{styleClass}}"
         tabIndex="-1" role="dialog"
         [attr.aria-labelledby]="'ui-dialog-title-' + id + '_main'"
         [attr.aria-hidden]="visible"
         [ngStyle]="style">
        <div
                class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
              <span class="ui-dialog-title"
                    id="ui-dialog-title-{{id}}_main">{{header}}</span>
            <a class="ui-dialog-titlebar-close ui-corner-all"
               role="button"
               (click)="hide($event)"
               href="#"
               [ngStyle]="closable ? null : {display: 'none'}">
                <span class="ui-icon ui-icon-closethick">close</span>
            </a>
        </div>
        <div id="{{id}}_main"
             class="ui-dialog-content ui-widget-content"
             [ngStyle]="visible ?
         {
            width: 'auto',
            minHeight: 0,
            height: 'auto'
          } :
          null"
        >
            <ng-content></ng-content>
        </div>
    </div>
</div>